码迷,mamicode.com
首页 > Web开发 > 详细

js实现定时器及注意的问题

时间:2015-05-01 12:11:17      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:定时器 js

<html>
<head>
<style>
div{width:100px;height:100px;position:absolute;background:red;left:0;top:50px;}
</style>
<script>
 var timer=null;
function startMove()
{
    clearInterval(timer);//开定时器前先关闭定时器。否则会多开几个定时器,div的速度会变快。
    var oDiv=document.getElementById(‘div1‘);
   
    timer=setInterval(function(){
        
        if(oDiv.offsetLeft>=300)
        {
            clearInterval(timer);//关闭timer定时器后会继续运行下面的代码。因此要将oDiv.style.left=oDiv.offsetLeft+10+‘px‘;放到else里,避免clearInterval(timer)之后运行,否则会出现div 10px的向右移动。
            //停止定时器是下次不执行了,但是这次还要将函数跑完了。
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+10+‘px‘;
        }
    },30);
}
</script>
</head>
<body>
<input type=‘button‘ value="开始运动" onclick=‘startMove()‘/>
<div id="div1"></div>
</body>
</html>


js实现定时器及注意的问题

标签:定时器 js

原文地址:http://onthecloud.blog.51cto.com/7312338/1641155

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!