您的位置：首页 > Web前端 > JavaScript

js运动基础1

2015-08-11 08:27 387 查看

1.在这个例子里面，如果在div块运动的过程中继续点击按钮的话，速度会越来越快，所以再开另一个定时器的时候要把之前的定时器给关掉。这里timer定义的位置会影响定时器是否关闭，如果把timer定义成局部变量，那么在每一次点击的时候都会是null，那么clearInterval根本起不到关定时器的作用。所以必须把定时器定义为全局变量。

2.对于speed这个变量，不用吧他放在外面，直接作为一个局部变量就好了。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 300px;
background: #ffccdd;
position: absolute;
}
</style>
</head>
<body>
<input id="btn" type="button"/>
<div id="div1">
</div>
<script>
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
var timer = null;
oBtn.onclick = function(){
//      var timer = null;
clearInterval(timer);
timer = setInterval(function (){
var speed = 1;

if(oDiv.offsetLeft>300)
{
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft+speed+'px';
}
},30);

};
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航