円周運動

8423 ワード

JavaScript js。円周運動

今日はMathオブジェクトを勉強しましたが、Mathオブジェクトを通して円周運動ができます.
実は円周運動の原理は簡単です.つまり物体が円周に沿って動きます.left=mash.sin(ラジアン)を使えばいいです.
Top=math.com.
コードは多重化可能であり、多重化は主に配列と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>

eosjs文書(取引)