原生js如何让一个dom原生做抛物线运动（右开口u型）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none
}

</style>
</head>
<body>
<input id="btn" type="button" value="画抛物线" />
</body>
</html>
<script type="text/javascript">

function $(id){
return document.getElementById(id);
}

window.onload = function(){
$("btn").onclick = function(){
let p=100;
let x = 500;//x的初始值
let incX = -0.5;//x的增量；
let ySign = 1;//y的符号（正负）
let myTimer = setInterval(function(){
x=x+incX;
if(x<0){ //到了抛物线的顶点
incX=0.5;//改变x的方向
ySign = -1;//改变y的符号
}
if(x>500 && incX>0){//到头了
window.clearInterval(myTimer);
return;
}
//求y （根据公式:y^2=2px）
let y = ySign*Math.sqrt(2*p*x);

//画个点
let divDom = document.createElement("div");
divDom.style.position = "absolute";
divDom.style.left = (x-2.5)+"px";
divDom.style.top = (y-2.5+400)+"px";//朝下偏移400像素，否则，上半部分会超出可视区域。
divDom.style.width = "5px";
divDom.style.height = "5px";
divDom.style.borderRadius = "50%";
divDom.style.backgroundColor= "red";
document.body.appendChild(divDom);
},2);
}
}

</script>

以下图片作为参考理解

原生js如何让一个dom原生做抛物线运动（右开口u型）

相关推荐