<!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>问题一 ：TEXT.value = TEXT.value + speed +","+ BOX.offsetLeft + "\n"
这句话中等式右边为什么要加一个TEXT.value?而且把TEXT.value加在等式右边的开头和结尾为何反馈的数据刚好颠倒？不加TEXT.value为什么里面的数据不换行？搞不懂
问题二：为什么我的TEXT.value值里面的speed是恒定不变的？而老师的TEXT.value值是不断地在变化？
问题一：加TEXT.value就是将TEXT.value每次执行的结果拼接保存起来 不加的话，只会用最后一次值覆盖之前的数据
问题二：speed值不变 是因为你只赋了一次 将var speed = (goal - BOX.offsetLeft)/8;放在定时器中
timer = setInterval(function(){
var speed = (goal - BOX.offsetLeft)/8;