<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none
}
#box{
position:absolute;
left:0px;
top:0px;
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<body style="height:1000px">
</body>
</html>
<script type="text/javascript">
//已知起点和p画抛物线
let p = 100;
let startPoint={x:200,y:100};
let myTimer=null;
function moveObj(){
if(myTimer!=null){
window.clearInterval(myTimer);
}
myTimer = setInterval(goStep,10);
}
let x = 0;
let incX = 1;//x的方向
function goStep(){
x=x+incX;
if(x>400){
window.clearInterval(myTimer);
myTimer = null;
return;
}
y = -1*Math.sqrt(2*p*x);
//改变抛物线的原点(移动原点,偏移)。
let xTemp = x+startPoint.x;
let yTemp = y+startPoint.y;
//外观:
let divObj = document.createElement("div");
let cssStr = "position:absolute;width:10px;height:10px;background-color:red;";
cssStr += "left:"+xTemp+"px;top:"+yTemp+"px;";
divObj.style.cssText = cssStr;
document.body.appendChild(divObj);
}
window.onload = function(){
moveObj();
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none
}
#box{
position:absolute;
left:0px;
top:0px;
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<body style="height:1000px">
</body>
</html>
<script type="text/javascript">
//已知起点和p画抛物线
let p = 100;
let startPoint={x:200,y:100};
let myTimer=null;
function moveObj(){
if(myTimer!=null){
window.clearInterval(myTimer);
}
myTimer = setInterval(goStep,10);
}
let x = 0;
let incX = 1;//x的方向
function goStep(){
x=x+incX;
if(x>400){
window.clearInterval(myTimer);
myTimer = null;
return;
}
y = -1*Math.sqrt(2*p*x);
//改变抛物线的原点(移动原点,偏移)。
let xTemp = x+startPoint.x;
let yTemp = y+startPoint.y;
//外观:
let divObj = document.createElement("div");
let cssStr = "position:absolute;width:10px;height:10px;background-color:red;";
cssStr += "left:"+xTemp+"px;top:"+yTemp+"px;";
divObj.style.cssText = cssStr;
document.body.appendChild(divObj);
}
window.onload = function(){
moveObj();
}
</script>