zoukankan      html  css  js  c++  java
  • js运动基础1

    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>
  • 相关阅读:
    LF 第三章 装饰器和迭代器相关
    Python 文件管理
    Python 强制类型转换
    安装模块
    LF 第三章
    pep8 Python编码规则
    Help on module pyclbr:
    Help on class timedelta in module datetime:
    Help on function meshgrid in module numpy.lib.function_base:
    Help on module matplotlib.cm in matplotlib:
  • 原文地址:https://www.cnblogs.com/zhuni/p/4715486.html
Copyright © 2011-2022 走看看