第一種情況<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
#div1?{width:200px;height:200px;background:?red;position:absolute;top:50px;}
</style>
<script?type="text/javascript">
var?timer="";
function?startMove(){
var?oDiv=document.getElementById('div1');
var?oBtn=document.getElementById('btn1');
var?speed=10;
clearInterval(timer);
timer=setInterval(function(){
oDiv.style.left=oDiv.offsetLeft+speed+"px"
},30)
}
</script>
</head>
<body>
<input?type="button"?id="btn1"?onclick="startMove()"?>
<div?id="div1"></div>
</body>
</html>該情況下div可正常右移！第二種情況<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
#div1?{width:200px;height:200px;background:?red;position:absolute;top:50px;}
</style>
<script?type="text/javascript">
function?startMove(){
var?oDiv=document.getElementById('div1');
var?oBtn=document.getElementById('btn1');
var?speed=10;
var?timer="";
clearInterval(timer);
timer=setInterval(function(){
oDiv.style.left=oDiv.offsetLeft+speed+"px"
},30)
}
</script>
</head>
<body>
<input?type="button"?id="btn1"?onclick="startMove()"?>
<div?id="div1"></div>
</body>
</html>此情況下點擊buttn次數越多 div速度越快，， 請問為什么？？ timer在里面在外面有區別嗎？第三種情況<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
#div1?{width:200px;height:200px;background:?red;position:absolute;top:50px;}
</style>
<script?type="text/javascript">
var?oDiv=document.getElementById('div1');
var?oBtn=document.getElementById('btn1');
var?speed=10;
var?timer="";
function?startMove(){
clearInterval(timer);
timer=setInterval(function(){
oDiv.style.left=oDiv.offsetLeft+speed+"px"
},30)
}
</script>
</head>
<body>
<input?type="button"?id="btn1"?onclick="startMove()"?>
<div?id="div1"></div>
</body>
</html>在這種情況下會報錯，，但是為什么。。我定義的那些odiv obtn之類的不是全局變量嗎？為什么會報錯？？求高人解答！??！
1 回答
已采納
堂堂堂堂糖糖糖童鞋
TA貢獻101條經驗 獲得超58個贊
第一個問題：此情況下點擊buttn次數越多 div速度越快，， 請問為什么？？ timer在里面在外面有區別嗎？
速度愈來愈快的原因是定時器同一時間內疊加的效果，就是30ms 內有多個定時器（回調函數）在執行。
timer在外面是全局變量，每次點擊不會重新聲明，那么 clearInterval(timer) 就能夠起作用，從而清除上一個定時器
timer在里面是局部變量，每次點擊重新聲明，timer 還沒被賦值，就被 clearInterval(timer)，那么這個 clearInterval(timer)并不會清除掉定時器，導致同一時刻多個定時器同時存在，盒子移動的越來越快。
第二個問題：在這種情況下會報錯，，但是為什么。。我定義的那些odiv obtn之類的不是全局變量嗎？為什么會報錯？？
這是加載順序的問題，腳本放到 <head> 中，所以執行要先于 <body> 中的DOM渲染，導致并不能取到那個 <div> 元素，所以一直都是 null。改進的辦法是用?
window.onload?=?function?()?{?
????//?你的代碼
}包括一下，等到窗口加載完成，也就是頁面完全渲染出來之后執行，那么就可以取到 <div>了。
或者是放到 </body> 結束標簽的前面也是可以的，就是保證DOM先渲染，然后再操作。