圆周运动

 今天学了Math对象,发现通过Math对象可以使物体做圆周运动。

其实圆周运动的原理很简单:就是物体沿圆周运动,只要让left=math.sin(弧度)

Top=math.cos(弧度)。

代码实现了可复用,复用主要是使用了数组和for循环。

代码如下:

 

  
  
  
  
  1. <!DOCTYPE html> 
  2. <html>  
  3. <head> 
  4.     <meta charset="utf-8" /> 
  5.     <title> new document </title> 
  6.     <meta name="keywords" content="" /> 
  7.     <meta name="description" content="" /> 
  8.     <style> 
  9.         #out{height:200px;width:400px;margin:100px auto;position:relative;} 
  10.     </style> 
  11. </head> 
  12. <body> 
  13.     <div id="out" > 
  14.     <div style="height:30px;width:30px;position:absolute;border:1px red solid;">1</div> 
  15.     <div style="height:30px;width:30px;position:absolute;border:1px blue solid;">2</div> 
  16.     <div style="height:30px;width:30px;position:absolute;border:1px black solid;">3</div> 
  17.     <input type="button" value="开始" style="height:30px;width:50px;margin-left:60px;" id="ipt1"
  18.     <input type="button" value="停止" style="height:30px;width:50px;" id="ipt2"
  19.     </div> 
  20.     <script type="text/javascript"
  21.         var x,y; 
  22.         var a=true
  23.         var x1=new Array(); 
  24.         var y1=new Array(); 
  25.         var du=new Array(); 
  26.         var h=new Array(); 
  27.         var w=new Array(); 
  28.         var out=document.getElementById('out'); 
  29.         var divs=out.getElementsByTagName('div'); 
  30.         var num=divs.length; 
  31.         var du1=360/num; 
  32.         for(var i=0;i<divs.length;i++){ 
  33.             x1[i]=200*Math.sin(Math.PI*(i*du1)/180); 
  34.             y1[i]=100*Math.cos(Math.PI*(i*du1)/180); 
  35.             divs[i].style.left=x1[i]+"px"
  36.             divs[i].style.top=y1[i]+"px"
  37.             du[i]=i*du1; 
  38.             divs[i].style.height=(y1[i]+150)*0.5+'px'
  39.             divs[i].style.width=(y1[i]+150)*0.5+'px'
  40.         } 
  41.         function move(){         
  42.             for(var i=0;i<divs.length;i++){ 
  43.                 du[i]+=1;            
  44.                 x=200*Math.sin(Math.PI*du[i]/180); 
  45.                 y=100*Math.cos(Math.PI*du[i]/180); 
  46.                 divs[i].style.left=x+"px"
  47.                 divs[i].style.top=y+"px"
  48.                 divs[i].style.height=(y+150)*0.5+'px'
  49.                 divs[i].style.width=(y+150)*0.5+'px';                
  50.             }            
  51.         } 
  52.         var t; 
  53.         var ipt1=document.getElementById('ipt1'); 
  54.         var ipt2=document.getElementById('ipt2'); 
  55.         ipt1.onclick=function (){  
  56.             if(!a) 
  57.             {return;} 
  58.         t =setInterval(move,16); 
  59.             a=false
  60.         } 
  61.         ipt2.onclick=function (){ clearInterval(t);a=true;} 
  62.     </script> 
  63. </body> 
  64. </html> 

你可能感兴趣的:(JavaScript,js,圆周运动)