MicrosoftInternetExplorer402DocumentNotSpecified7.8Normal0
今天学了Math对象,发现通过Math对象可以使物体做圆周运动。
其实圆周运动的原理很简单:就是物体沿圆周运动,只要让left=math.sin(弧度)
Top=math.cos(弧度)。
代码实现了可复用,复用主要是使用了数组和for循环。
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title> new document </title>
- <meta name="keywords" content="" />
- <meta name="description" content="" />
- <style>
- #out{height:200px;width:400px;margin:100px auto;position:relative;}
- </style>
- </head>
- <body>
- <div id="out" >
- <div style="height:30px;width:30px;position:absolute;border:1px red solid;">1</div>
- <div style="height:30px;width:30px;position:absolute;border:1px blue solid;">2</div>
- <div style="height:30px;width:30px;position:absolute;border:1px black solid;">3</div>
- <input type="button" value="开始" style="height:30px;width:50px;margin-left:60px;" id="ipt1">
- <input type="button" value="停止" style="height:30px;width:50px;" id="ipt2">
- </div>
- <script type="text/javascript">
- var x,y;
- var a=true;
- var x1=new Array();
- var y1=new Array();
- var du=new Array();
- var h=new Array();
- var w=new Array();
- var out=document.getElementById('out');
- var divs=out.getElementsByTagName('div');
- var num=divs.length;
- var du1=360/num;
- for(var i=0;i<divs.length;i++){
- x1[i]=200*Math.sin(Math.PI*(i*du1)/180);
- y1[i]=100*Math.cos(Math.PI*(i*du1)/180);
- divs[i].style.left=x1[i]+"px";
- divs[i].style.top=y1[i]+"px";
- du[i]=i*du1;
- divs[i].style.height=(y1[i]+150)*0.5+'px';
- divs[i].style.width=(y1[i]+150)*0.5+'px';
- }
- function move(){
- for(var i=0;i<divs.length;i++){
- du[i]+=1;
- x=200*Math.sin(Math.PI*du[i]/180);
- y=100*Math.cos(Math.PI*du[i]/180);
- divs[i].style.left=x+"px";
- divs[i].style.top=y+"px";
- divs[i].style.height=(y+150)*0.5+'px';
- divs[i].style.width=(y+150)*0.5+'px';
- }
- }
- var t;
- var ipt1=document.getElementById('ipt1');
- var ipt2=document.getElementById('ipt2');
- ipt1.onclick=function (){
- if(!a)
- {return;}
- t =setInterval(move,16);
- a=false;
- }
- ipt2.onclick=function (){ clearInterval(t);a=true;}
- </script>
- </body>
- </html>
-
代码文件:
圆周运动.rar
阅读(389) | 评论(0) | 转发(0) |