<!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>
#box{width: 200px;height: 200px;top: 300px;background-color: red;position: absolute}
#deadline{width: 1px;height: 900px;background-color: black;position: absolute;left: 1000px;}
</style>
<script>
window.onload = function(){
var BTN = document.getElementById("btn");
BTN.onclick = function(){
Starmove(1000);
}
}
var timer = null;
var Starmove = function(goal){
var BOX = document.getElementById("box");
var speed = (goal - BOX.offsetLeft)/18;
clearInterval(timer);
timer = setInterval(function(){
if(BOX.offsetLeft == goal ){
clearInterval(timer);
}else{
BOX.style.left = BOX.offsetLeft + speed + "px"
}
},30)
}
</script>
</head>
<body>
<button id="btn">开始运动</button>
<div id="box"></div>
<span id="deadline"></span>
</body>
</html>上述代码中：两个问题：
1：当var speed = (goal - BOX.offsetLeft)/18;时，为什么box方块会出界？而只有设置var speed = (goal - BOX.offsetLeft)/8的时候不会出界？
2：我已经设置了
if(BOX.offsetLeft == goal ){
clearInterval(timer);
所以我认为无论我给speed设置一个怎样的数字，它都会最终停在目的地，为什么这个当我给speed = 5的时候它不会停止，而是无限运动出界？
除以18 speed出现小数点变为浮点数，浮点数计算四则运算时会有精度丢失问题，导致BOX.offsetLeft == goal不匹配。
除以8 speed为整数，没有精度问题，所以能停止
要改下逻辑，offsetleft大于goal就设置为goal防止浮点数计算精度丢失的问题
<!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>
#box{width: 200px;height: 200px;top: 300px;background-color: red;position: absolute}
#deadline{width: 1px;height: 900px;background-color: black;position: absolute;left: 1000px;}
</style>
<script>
window.onload = function(){
var BTN = document.getElementById("btn");
BTN.onclick = function(){
Starmove(1000);
}
}
var timer = null;
var Starmove = function (goal) {
var BOX = document.getElementById("box");
var speed = (goal - BOX.offsetLeft) / 18;
clearInterval(timer);
timer = setInterval(function () {
var left = BOX.offsetLeft + speed;
if (left > goal) {
clearInterval(timer);
left = goal;////////
}
BOX.style.left = left + "px"
}, 30)
}
</script>
</head>
<body>
<button id="btn">开始运动</button>
<div id="box"></div>
<span id="deadline"></span>
</body>
</html>