定时器的应用3

<!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;
            }
            
            #box2{
                width: 100px;
                height: 100px;
                background-color: yellow;
                position: absolute;
                left: 0;
                top: 200px;
            }
            
        </style>
        <script type="text/javascript" src="js/tools.js"></script>
        <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 ,"left", 800 , 20);
                };
                
                
                //点击按钮以后，使box1向左移动（left值减小）
                btn02.onclick = function(){
                    move(box1 ,"left", 0 , 10);
                };
                
                
                //获取btn03
                var btn03 = document.getElementById("btn03");
                btn03.onclick = function(){
                    move(box2 , "left",800 , 10);
                };
                
                //测试按钮
                var btn04 = document.getElementById("btn04");
                btn04.onclick = function(){
                    //move(box2 ,"width", 800 , 10);
                    //move(box2 ,"top", 800 , 10);
                    //move(box2 ,"height", 800 , 10);
                    move(box2 , "width" , 800 , 10 , function(){
                        move(box2 , "height" , 400 , 10 , function(){
                            move(box2 , "top" , 0 , 10 , function(){
                                move(box2 , "width" , 100 , 10 , function(){
                            
                                });
                            });
                        });
                    });
                };
            };
            
            //定义一个变量，用来保存定时器的标识
            /*
             * 目前我们的定时器的标识由全局变量timer保存，
             *  所有的执行正在执行的定时器都在这个变量中保存
             */
            //var timer;
            
            
            
            
        </script>
    </head>
    <body>
        
        <button id="btn01">点击按钮以后box1向右移动</button>
        <button id="btn02">点击按钮以后box1向左移动</button>
        <button id="btn03">点击按钮以后box2向右移动</button>
        <button id="btn04">测试按钮</button>
        
        <br /><br />
        
        <div id="box1"></div>
        <div id="box2"></div>
        
        <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
        
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容