js匀速运动
js匀速运动
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
top: 100px;
}
</style>
</head>
<body>
<button id="btn">move</button>
<div class="box"></div>
<script>
// 单击按钮 让div匀速运动到500px停止
var btn = document.getElementById("btn");
var oDiv = document.querySelector("div");
var timer = null;
btn.onclick=function(){
clearInterval(timer);
timer=setInterval(move,100);
}
var num=0;
function move(){
num+=5;
if(num>1000){
clearInterval(timer)
}else{
oDiv.style.left=num+"px";
}
}
</script>