<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
position:absolute;
top:100px;
left:0;
width:100px;
height:100px;
background-color:skyblue;
}
input{
height: 50px;
}
</style>
</head>
<body>
<br>
<input type="button" value="开始将下面的元素向右移动" id="start">
<input type="button" value="点击停止元素的移动" id="ttt">
<div class="box" id="box">
</div>
<script>
var start = document.getElementById("start");
var box = document.getElementById("box");
var ttt = document.getElementById("ttt");
//已知 开始位置，结束位置，总时长，时间间隔
//总距离 = 步长 * 总次数
//总距离 = 结束位置 - 起始位置 ，已知可以求出来
//总次数 = 总时长 / 时间间隔，已知可以求出来
//步长 = （结束位置 - 起始位置） / （总时长 / 时间间隔）
//信息量，也相当于初始值
var nowLeft = 100;
//结束位置
var endLeft = 500;
//总时长
var time = 2000;
//时间间隔
var interval = 50;
//运算总次数
var maxcount = time / interval;
//运算出每一次的步长
var step =(endLeft - nowLeft) / maxcount;
//var step = (endLeft - nowLeft) / (time / interval);
console.log(step);
//定义一个次数的累加器
var count = 0;
//准备条件结束可以开始定时器了
var timer;
start.onclick = function(){
timer = setInterval(function(){
//让元素的属性每一次变化一个步长
nowLeft += step;
//每运动一次让次数累加器加 1
count++;
//停止定时器
if(count >= maxcount){
//拉终停表
nowLeft = endLeft;
clearInterval(timer);
}
//给属性赋值
box.style.left = nowLeft + "px";
},interval);
};
</script>
</body>
</html>
