特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

物理运动学与JS结合尝试

来源：互联网收集：自由互联发布时间：2021-07-03

js实现匀速运动，js实现匀加速运动，js实现重力加速度，js实现曲线运动请看：博客地址：http://my.oschina.net/tbd/blog/648050 博客地址：http://my.oschina.net/tbd/blog/648050 博客地址：http://my.osc

js实现匀速运动，js实现匀加速运动，js实现重力加速度，js实现曲线运动
请看：
博客地址：http://my.oschina.net/tbd/blog/648050
博客地址：http://my.oschina.net/tbd/blog/648050
博客地址：http://my.oschina.net/tbd/blog/648050

1. [文件] 1.水平匀速.html ~ 1KB 下载(2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
	<div id="demo">水平匀速运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
	var demo=document.getElementById("demo");//获取div
  var sleft=demo.offsetLeft;//起始位置
	var t=0;//初始时间，0
	var changt=10;//间隔时间，触发变化运动
	var v=1;//速度，间隔时间变化的位移
	var d=setInterval(dong,changt);//每100毫秒变化一次
	function dong(){
		if(demo.offsetLeft>600){
			clearInterval(d);
		}else{
			t+=changt;//t变化
			var realleft=v*t;
			demo.style.left=sleft+realleft+"px";
		};
	};
};
</script>
</html>

2. [文件] 2.水平匀加速.html ~ 1KB 下载(2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
	<div id="demo">水平匀加速运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
	var demo=document.getElementById("demo");//获取div
  var sleft=demo.offsetLeft;//起始位置
	var t=0;//初始时间，0
	var changt=1;//间隔时间，触发变化运动
	var v=1;//速度，间隔时间变化的位移
	var a=0.05;//加速度
	var d=setInterval(dong,changt);//每100毫秒变化一次
	function dong(){
		if(demo.offsetLeft>1000){
			clearInterval(d);
		}else{
			t+=changt;//t变化
			var realleft=a*t*t/2;
			demo.style.left=sleft+realleft+"px";
		};
	};
};
</script>
</html>

3. [文件] 3.水平和垂直匀速1.html ~ 1KB 下载(1)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
	<div id="demo">水平匀速运动+垂直匀速运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
	var demo=document.getElementById("demo");//获取div
  var sleft=demo.offsetLeft;//起始位置
	var stop=demo.offsetTop;//起始位置
	var t=0;//初始时间，0
	var changt=10;//间隔时间，触发变化运动
	var v=1;//速度，间隔时间变化的位移
	var d=setInterval(dong,changt);//每100毫秒变化一次
	function dong(){
		if(demo.offsetLeft>400){
			clearInterval(d);
		}else{
			t+=changt;//t变化
			var realleft=v*t;
			var realtop=v*t;
			demo.style.left=sleft+realleft+"px";
			demo.style.top=stop+realtop+"px";
		};
	};
};
</script>
</html>

4. [文件] 4.水平和垂直匀速2.html ~ 1KB 下载(1)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
	<div id="demo">水平匀速运动+垂直匀速运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
	var demo=document.getElementById("demo");//获取div
  var sleft=demo.offsetLeft;//起始位置
	var stop=demo.offsetTop;//起始位置
	var t=0;//初始时间，0
	var changt=10;//间隔时间，触发变化运动
	var vt=1;//垂直速度，间隔时间变化的位移
	var vl=2;//水平速度，间隔时间变化的位移
	var d=setInterval(dong,changt);//每100毫秒变化一次
	function dong(){
		if(demo.offsetLeft>600){
			clearInterval(d);
		}else{
			t+=changt;//t变化
			var realleft=vl*t;
			var realtop=vt*t;
			demo.style.left=sleft+realleft+"px";
			demo.style.top=stop+realtop+"px";
		};
	};
};
</script>
</html>

5. [文件] 5.曲线运动.html ~ 1KB 下载(8)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
	<div id="demo">曲线运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
	var demo=document.getElementById("demo");//获取div
  var sleft=demo.offsetLeft;//起始位置
	var stop=demo.offsetTop;//起始位置
	var t=0;//初始时间，0
	var changt=1;//间隔时间，触发变化运动
	var vt=1;//垂直速度，间隔时间变化的位移
	var vl=2;//水平速度，间隔时间变化的位移
	var at=0.05//垂直加速度
	var d=setInterval(dong,changt);//每100毫秒变化一次
	function dong(){
		if(demo.offsetTop>400){
			clearInterval(d);
		}else{
			t+=changt;//t变化
			var realleft=vl*t;
			var realtop=at*t*t/2;
			demo.style.left=sleft+realleft+"px";
			demo.style.top=stop+realtop+"px";
		};
	};
};
</script>
</html>

上一篇：canvas写了一个⏲️时钟
下一篇：url参数相关处理（获取，添加，删除）