弹性运动+摩擦力+运动停止条件

来源：互联网发布：男科网络预约挂号平台编辑：程序博客网时间：2024/04/29 09:52

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
#box{width:100px;height:100px;background:red;position: absolute;left:0;}
span{height:900px;border-left:1px red solid;position: absolute;left:500px;}
</style>
<title></title>
<script type="text/javascript">
window.onload=function()
{
var oInput=document.getElementById("input1");
var oDiv=document.getElementById("box");
var timer=null;
oInput.onclick=function()
{
startMove();
};
function startMove()
{
clearInterval(timer);
var iSpeed=0;
timer=setInterval(function()
{
iSpeed+=(500-oDiv.offsetLeft)/50;
iSpeed*=0.95;
if(Math.abs(iSpeed)<=1&&Math.abs(500-oDiv.offsetLeft)<=1)//停止条件，速度足够小距离目标点足够小
{
clearInterval(timer);//清除定时器
}
oDiv.style.left=oDiv.offsetLeft+iSpeed+"px";
},30)
}
}
</script>
</head>
<body>
<input type="button" value="开始运动" id="input1"/>
<div id="box"></div>
<span></span>
</body>
</html>

0 0