抛物线系列_02顶点不在原点

最新推荐文章于 2022-03-11 23:33:51 发布

田江

最新推荐文章于 2022-03-11 23:33:51 发布

阅读量1.6k

点赞数

分类专栏： JavaScript从入门到精通文章标签： javascript web前端开发 web应用 web开发

本文链接：https://blog.csdn.net/jiang7701037/article/details/78945180

版权

JavaScript从入门到精通专栏收录该内容

147 篇文章 80 订阅

订阅专栏

代码：

<!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">

//1、假定焦点F(100,0)
//2、p就是2*F.x = 200;

let p = 100;

let myTimer=null;
function moveObj(){
	if(myTimer!=null){
		window.clearInterval(myTimer);
	}
	myTimer = setInterval(goStep,10);
}

let x = 400;
let incX = -1;//x的方向

function goStep(){
	x=x+incX;//0
	if(x<0){//-1
		incX=1;//1
		return;
	}else if(x>=400){
		window.clearInterval(myTimer);
		myTimer = null;
		return;
	}
	y = Math.sqrt(2*p*x);
	//求出y  y^2 = 2px;
	if(incX==1){
		y=-1*y;
	}
	y +=500;
	
	//改变抛物线的原点(移动原点，偏移)。
	let xTemp = x+100;
	let yTemp = y-200;
	
	
	//外观：
	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>