<!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)/8;
clearInterval(timer);
timer = setInterval(function(){
if(BOX.offsetLeft == goal ){
clearInterval(timer);
}else{
BOX.style.left = BOX.offsetLeft + speed + "px";
}
var TEXT = document.getElementById("text");
TEXT.value = TEXT.value + speed +","+ BOX.offsetLeft + "\n"
},30)
}
</script>
</head>
<body>
<button id="btn">开始运动</button>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<div id="box"></div>
<span id="deadline"></span>
</body>
</html>
<!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");
clearInterval(timer);
timer = setInterval(function(){
var speed = (goal - BOX.offsetLeft)/8;
// if(BOX.offsetLeft == goal ){
// clearInterval(timer);
// }else{
BOX.style.left = BOX.offsetLeft + speed + "px";
// }
// var TEXT = document.getElementById("text");
// TEXT.value = TEXT.value + speed +","+ BOX.offsetLeft + "\n"
},30)
}
</script>
</head>
<body>
<button id="btn">开始运动</button>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<div id="box"></div>
<span id="deadline"></span>
</body>
</html>
上述两段代码中第一段代码是老师的代码,我觉得没有必要加if语句,因为var speed = (goal - BOX.offsetLeft)/8;,当BOX.offsetLeft == goal的时候这俩数相减就等于0了,自然就会停止运动了呀,所以我想问是我想的太简单还是?
不知道你这个问题是否已经解决, 如果还没有解决的话: