machinecat520
/
zj-Exercise


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        * {
            margin: 0;
            padding: 0;
        }

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            /* 
            增加一个left:0，主要是解决部分IE浏览器不能正常获取box1的原始left值的问题
            */
            left: 0;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 0;
            top: 200px;
        }
    </style>
    <script src="js/tools.js"></script>
    <script>

        window.onload = function () {
            //获取box1
            var box1 = document.getElementById('box1');
            //获取btn01
            var btn01 = document.getElementById('btn01');
            //获取btn02
            var btn02 = document.getElementById('btn02');

            //定义一个变量，用来保存定时器的标识
            var timer;

            //点击按钮以后，box1向右移动（left值增大）
            btn01.onclick = function () {
                move(box1, "left", 500, 15);
            };
            //点击按钮以后，box1向左移动（left值减小）
            btn02.onclick = function () {
                move(box1, "top", 0, 10)
            };

            //获取btn03
            var btn03 = document.getElementById('btn03');
            btn03.onclick = function () {
                move(box2, "width", 500, 10);
            };

            //获取btn04
            var btn04 = document.getElementById('btn04');
            btn04.onclick = function () {
                move(box2, "width", 500, 10, function () {
                    move(box2, "height", 500, 10, function () {
                        move(box2, "top", 0, 10, function () {
                            move(box2, "height", 100, 10, function () {
                                move(box2, "width", 100, 10, function () {
                                    move(box2, "top", 200, 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>
    <!-- 设置一条参考线，用来判断box1是否移动了想要的距离 -->
    <div style="width: 0;
     height: 1000px;
      border-left: 1px black solid;
       position: absolute;
        left: 500px;
         top: 0;"></div>
</body>

</html>