第一种情况<!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先渲染，然后再操作。
添加回答
举报
0/150
提交
取消