定时器应用-点击按钮，div向右移动

需求是点击button，div就一直往右移动，给个条件left=800px就停止移动，通过定时器来控制。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box1{
                width: 100px;
                height: 100px;
                background: red;
                /*因为在IE浏览器中如果没有指定的值，就默认auto，所以我们需要先指定一个值*/
                position: absolute;
                left: 0;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                
                //获取元素的值
                function getStyle(obj,name){
                    if(window.getComputedStyle){
                        return getComputedStyle(obj,null)[name]
                    }
                    else{
                        return obj.currentStyle[name]
                    }
                }
                //需求是点击button，div就一直往左移动
                btn = document.getElementById("btn");
                box1 = document.getElementById("box1");
                var timer;
                btn.onclick = function(){
                    
                    //清除上一个定时器
                    clearInterval(timer);
                    //开启一个定时器，用来执行动画效果
                    setInterval(function(){
                        //获取box1原来的left值，通过复用的函数去获取,parseInt是把字符串的数字部分转换为number
                    
                    var oldlvalue = parseInt(getStyle(box1,"left"));
                    newvalue = oldlvalue + 10;
                    if(newvalue>800){
                        newvalue = 800;
                    }
                    box1.style.left = newvalue + "px";
                    /*
                     * 控制移动的位置，当800px时，就停止移动
                     */
                    if(newvalue ===  800){
                        clearInterval(timer);
                    }
                    },3000)
                }
            }
        </script>
    </head>
    <body>
        
        <button id="btn">点击div向右移动</button>
        <br /><br />
        <div id="box1"></div>
    </body>
</html>

希望可以坚持学习新的，这也是作为一个复习，到时候要回顾一看便知，多谢支持！

定时器应用-点击按钮，div向右移动

猜你喜欢