定时器应用2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            *{
                margin: 0;
                padding: 0;
            }
            
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
            }
            
        </style>
        
        <script type="text/javascript">
            
            window.onload = function(){
                
                //获取box1
                var box1 = document.getElementById("box1");
                //获取btn01
                var btn01 = document.getElementById("btn01");
                
                //获取btn02
                var btn02 = document.getElementById("btn02");
                
                
                //点击按钮以后，使box1向右移动（left值增大）
                btn01.onclick = function(){
                    move(box1 , 800 , 10);
                };
                
                
                //点击按钮以后，使box1向左移动（left值减小）
                btn02.onclick = function(){
                    move(box1 , 0 , 10);
                };
                
            };
            
            //定义一个变量，用来保存定时器的标识
            var timer;
            
            //尝试创建一个可以执行简单动画的函数
            /*
             * 参数：
             *  obj:要执行动画的对象
             *  target:执行动画的目标位置
             *  speed:移动的速度(正数向右移动，负数向左移动)
             */
            function move(obj , target ,speed){
                //关闭上一个定时器
                clearInterval(timer);
                
                //获取元素目前的位置
                var current = parseInt(getStyle(obj,"left"));
                
                //判断速度的正负值
                //如果从0 向 800移动，则speed为正
                //如果从800向0移动，则speed为负
                if(current > target){
                    //此时速度应为负值
                    speed = -speed;
                }
                
                //开启一个定时器，用来执行动画效果
                timer = setInterval(function(){
                    
                    //获取box1的原来的left值
                    var oldValue = parseInt(getStyle(obj,"left"));
                    
                    //在旧值的基础上增加
                    var newValue = oldValue + speed;
                    
                    //判断newValue是否大于800
                    //从800 向 0移动
                    //向左移动时，需要判断newValue是否小于target
                    //向右移动时，需要判断newValue是否大于target
                    if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
                        newValue = target;
                    }
                    
                    //将新值设置给box1
                    obj.style.left = newValue + "px";
                    
                    //当元素移动到0px时，使其停止执行动画
                    if(newValue == target){
                        //达到目标，关闭定时器
                        clearInterval(timer);
                    }
                    
                    
                },30);
            }
            
            
            /*
             * 定义一个函数，用来获取指定元素的当前的样式
             * 参数：
             *      obj 要获取样式的元素
             *      name 要获取的样式名
             */
            function getStyle(obj , name){
                
                if(window.getComputedStyle){
                    //正常浏览器的方式，具有getComputedStyle()方法
                    return getComputedStyle(obj , null)[name];
                }else{
                    //IE8的方式，没有getComputedStyle()方法
                    return obj.currentStyle[name];
                }
                
            }
            
            
        </script>
    </head>
    <body>
        
        <button id="btn01">点击按钮以后box1向右移动</button>
        <button id="btn02">点击按钮以后box1向左移动</button>
        
        <br /><br />
        
        <div id="box1"></div>
        
        <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
        
    </body>
</html>
最后编辑于：2018.02.08 14:34:22