master

分支 (1)

管理

管理

master

js_study
/
定时器2.html

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button id="btn01">点击按钮以后box1向右移动</button>
    <button id="btn02">点击按钮以后box1向左移动</button>
    <br><br>
    <div id="box1"></div>
</body>
<script>
    var btn01 = document.getElementById("btn01");
    var btn02 = document.getElementById("btn02");
    var box1 = document.getElementById("box1");
    var clock;

    btn01.onclick = function () {
        move(box1,800,10);
    }

    btn02.onclick = function () {
        move(box1,0,-10);
    }

    // 尝试创建一个可以实现简单动画的函数
    // 参数：obj 要执行动画的对象
    //      target 执行动画的目标位置
    //      speed 移动的速度（向右移动为正，向左移动为负值）

    function move(obj, target, speed,) {
        clearInterval(clock);
        // 开启一个定时器，执行动画效果
        clock = setInterval(function () {
            // 获取box1原来left值
            var oldValue = parseInt(obj.offsetLeft);
            // 在旧值的基础上增加
            var newValue = oldValue + speed;

            // 判断newValue是否大于800
            // 向左移动时，判断newValue是否小于target
            // 向右移动时，判断newValue是否大于target
            if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target))
                newValue == target;

            // 将新值设置给box1
            obj.style.left = newValue + "px";

            //当元素移动到800像素时，使其停止执行动画
            if (newValue == target) {
                // 到达目标，关闭定时器
                clearInterval(clock);
            }
        }, 40);
    }
</script>

</html>