setInterval定时器设定开关

最新推荐文章于 2024-03-29 16:23:23 发布

转载最新推荐文章于 2024-03-29 16:23:23 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/web001/p/8075629.html

本文介绍了一个使用JavaScript实现的简单案例，通过设置定时器使页面上的DIV元素按指定像素移动，并在达到特定位置时停止。

今天简单写一个小案例：点击按钮，让div“走”起来。主要是为了说明给定时器设定开关时需要注意的几个问题。需求是：当点击按钮，让div向右一直移动，当移动到500像素时，停下来。好了那么简单的布局代码看一下：

css代码
<style>
#box{width:50px;height:50px;background:#ff6b0e;position: absolute;top:50px;left:50px;}
</style>
html代码
<body>
<input id="btn" type="button" value="按钮"/>
<div id="box"></div>
</body>

那么简单的js效果是这样的：

<script>
    //兼容不同浏览器获取行间样式
    function getStyle ( obj, attr ) {
        return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
    }

    window.onload=function(){
        var aBtn=document.getElementById("btn");
        var oBox=document.getElementById("box");
        var timer=null;
        aBtn.onclick=function(){
            clearInterval(timer);//这里先要清除一下定时器是为了防止一直点击按钮，div一直加速

            //开启定时器,假定让其等于500的时候，停止下来
            timer=setInterval(function(){
                var speed=parseInt(getStyle(oBox,"left"))+18;

                if( speed > 500){//所以这里一定要让其要大于500的时候等于500，这样的话在给div赋值
                    speed = 500
                }

                oBox.style.left= speed +"px";

                //这里不能是大于500，否则有可能结果是508停下了，就不是要求的500
                if( speed == 500){
                    clearInterval(timer)
                }

            },50)

            };


    };
</script>