javascript实现div运动的代码中，一行代码位置不同，效果不同，这里是为什么呢？（具体见注释））
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width:200px;
height:200px;
background:#ccc;
position:absolute;
left:0;
top:50px;
}
</style>
</head>
<body>
<script type="text/javascript">
var timer;
function divMove(){
var speed=2;
var bt1=document.getElementById('bt1');
/*1.为什么下面这一行必须放在divMove里面才能确保div能移动 ，而放在divMove外面整个运动都进行不了了 ，
2.这一行只是取div而已，在外面当做全局变量来用，不行吗，
3.bt1放在外面怎么就没有影响*/
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft>=400){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
oDiv.onmouseover=function(){
clearInterval(timer);
}
}
</script>
<input id='bt1' type="button" value='start run' onclick='divMove()'>
<div id='div1'></div>
</body>
</html>
白小凡浏览 1274回答 1
1回答
-
无所畏惧小小小
其中var bt1=document.getElementById('bt1');这一句代码是可以放在函数以外作为全局变量的。因为bt1只是一个按钮无需用计时器更新它的值。oDiv这个对象是一个通过计时器写的运动的div，必须在计时器内部调用，否则它的这个对象只会获取一次，导致它的位置（oDiv.offsetLeft）无法自增，所以就无法移动了。
随时随地看视频慕课网APP
相关分类
JavaScript