js实现一条抛物线
抛物线运动解释：
以右开口为例，根据公式 y^2 = 2px 。确定p的值，已知x求y。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body style="width:100%; min-width:600px; height:100%; min-height:500px;"> 8 <input id="btn" type="button" value="画抛物线" /> 9 </body> 10 <script type="text/javascript"> 11 function $(id){ 12 return document.getElementById(id); 13 } 14 window.onload = function(){ 15 $("btn").onclick = function(){ 16 let p=200; 17 //let x = 1000;//x的初值 18 let x=-300; 19 let myTimer = setInterval(function(){ 20 x++; 21 if(x > 300){//x的结束值 22 //x是从大到小的变化 23 //根据x的值求y （根据公式:y^2=2px）x^2 = -2py 24 window.clearInterval(myTimer); 25 return; 26 } 27 // y= Math.sqrt(2*p*x); 28 // x = (y*y)/(2*p) +100; 29 y = (x*x)/(2*p) +200; 30 31 32 33 //用div模拟画个点（x,y为圆心，半径为2.5） 34 let divDom = document.createElement("div"); 35 divDom.style.position = "absolute"; 36 divDom.style.left = (x+320-2.5)+"px"; 37 divDom.style.top = (y-2.5)+"px"; 38 divDom.style.width = "5px"; 39 divDom.style.height = "5px"; 40 divDom.style.borderRadius = "50%"; 41 divDom.style.backgroundColor= "red"; 42 document.body.appendChild(divDom); 43 },5);//每隔5毫米画个点 44 } 45 } 46 </script> 47 </html>