zoukankan      html  css  js  c++  java
  • setInterval定时器设定开关

    今天简单写一个小案例:点击按钮,让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>

    这里需要注意的几个问题是:

    第一,就是获取div的样式一定要用到getStyle,而它存在一定兼容性,其解决方案上面案例有写到,这是通用的简单写法;

    第二,就是若是让div在等于一定值的情况下停下来的话,一定要想清楚它移动的单位长度能否被这个值除尽,若不能,那么就要先判断当其大于这个值的时候要它先等于设定的这个值,然后再去赋值,给加条件让其停止。

    好了,上面的例子备注也很清楚了,当然这只是一个很简单的小例子,若遇到类似的问题,一定要想到这些细节!希望对大家有帮助!今天就到这里!

  • 相关阅读:
    Git的安装与配置
    JDBCTemplate
    消费金融大数据风控架构
    架构设计之道
    面向服务架构SOA
    java集合List解析
    web应用安全
    微服务的交互模式
    服务化管理和治理框架的技术选型
    分库分表就能无限扩容么?
  • 原文地址:https://www.cnblogs.com/web001/p/8075629.html
Copyright © 2011-2022 走看看