JavaScript实现圆周运动

Js实现圆周运动

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0px;margin: 0px;}.box5 {position: relative;height: 300px;width: 300px;border-radius: 50%;background-color: chartreuse;margin: 50px auto;}.circle {height: 20px;width: 20px;border-radius: 50%;position: absolute;background-color: coral;margin-left: -10px;margin-top: -10px;}</style>
</head><body><!-- <div id="box5"><div id="circle"></div></div> --><div class="box5"><div class="circle"></div></div><script>// 10.三角函数圆周运动function cirMotion() {// var box = document.getElementById("box5");     //使用getElementById获取元素// var circle = document.getElementById("circle");var box = document.querySelector(".box5");var circle = document.querySelector(".circle");var angle = 0;    //定义每次走的角度// var radius = box.offsetWidth / 2;    //offerWidth得到元素盒模型的返回盒模型的宽度（包括width+左右padding+左右border）var r = box.offsetWidth / 2;clearInterval(timer);var timer = setInterval(function () {angle += 1;var rad = Math.PI / 180 * angle;   //得到角度的弧度值var x = r * Math.cos(rad);    //得到横坐标值// var x = x + 5;var y = r * Math.sin(rad);     //得到纵坐标值circle.style.left = r + x + "px";circle.style.top = r - y + "px";}, 20);}cirMotion();</script>
</body></html>

JavaScript实现圆周运动相关推荐

javascript与三角函数之二：圆周运动
我们看下我们通过三角函数要做出来的效果 sin.cos.tan概念为了直观,我们引入一个三角形概念如下: sinα = b / ccosα = a / ctanα = b / a javascri ...
JavaScript动画知多少？
今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...
秀下有关JavaScript的专业技能，走过路过不要错过！
这一波想给大家秀下有关JavaScript的专业技能! 宅家了大半年,盼啊盼终于盼来了开学.还是挺开心的,可以和宿舍的小伙伴们一起去打王者.喝奶茶.吃烧烤了! 不过,玩归玩,浪归浪,别拿学习就业开玩笑 ...
原生JavaScript中动画与特效的实现原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
【javascript】运动与游戏开发
[javascript]运动与游戏开发一.学习运动框架作用二.运动原理三.定时器 3.1. **倒计定时器:timer=setTimeout(函数名,delaytime);** 3.2. **循 ...
【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...

JavaScript实现圆周运动

Js实现圆周运动

JavaScript实现圆周运动相关推荐

最新文章

热门文章