.112定时器的应用3

sanda_nd

已于 2022-04-29 16:09:36 修改

阅读量389

点赞数

分类专栏： js基础文章标签： javascript 前端

于 2022-04-29 16:09:20 首次发布

本文链接：https://blog.csdn.net/sanda_nd/article/details/124498131

版权

js基础专栏收录该内容

116 篇文章 0 订阅

订阅专栏

本文介绍了一个HTML页面中如何使用JavaScript实现三个不同定时器，分别控制红色、绿色和蓝色方块的移动，并展示了绿色方块先增加宽度再增加高度的独特动画效果。通过btn4按钮测试，演示了如何独立控制每个元素的动画行为。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="ch">

<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>定时器的应用3</title>
    <!-- 引用外部文件 -->
    <script src="./tools.js"></script>
    <script>
        window.onload = function () {
            var box = document.getElementById('box');
            var box2 = document.getElementById('box2');
            var box3 = document.getElementById('box3');
            var btn = document.getElementById('btn');
            var btn2 = document.getElementById('btn2');
            var btn3 = document.getElementById('btn3');
            var btn4 = document.getElementById('btn4');
            /*
                 - 由于box和box2使用同一个定时器，此时会导致其中一个运行时，再点击另一个，第一个会停止运行
                 - 需要让两个方块各自使用本身的定时器(向执行动画的对象中添加timer属性)
            */
            // var timer;
            btn.onclick = function () {
                move(box, 1000, 10, 'left');

            };
            btn2.onclick = function () {
                move(box, 0, 10, 'left');
            };
            btn3.onclick = function () {
                move(box2, 1000, 10, 'left');
            };
            btn4.onclick = function () {
                move(box3, 1000, 10, 'width', function () {
                    move(box3, 1000, 10, 'height', function () {
                        alert('动画执行完毕了');
                    });
                });
            };



        };

    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;

        }

        #clue {
            width: 0;
            height: 1000px;
            border-left: solid black 1px;
            position: absolute;
            top: 0;
            left: 1000px;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: rgb(77, 255, 0);
            position: absolute;
            top: 200px;

        }

        #box3 {
            width: 100px;
            height: 100px;
            background-color: rgb(72, 0, 255);
            position: absolute;
            top: 400px;

        }
    </style>
</head>

<body>
    <button id="btn">使box向右移动</button>
    <button id="btn2">使box向左移动</button>
    <button id="btn3">使box2向右移动</button>
    <button id="btn4">测试</button>



    <br><br>
    <div id="box"></div>
    <div id="box2"></div>
    <div id="box3"></div>

    <div id="clue"></div>
</body>

</html>

下面为引用的外部文件tools.js的内容

// 定义一个获取元素样式的函数
function getStyle(obj, name) {
    if (window.getComputedStyle) {
        // 其他浏览器
        return getComputedStyle(obj, name)[name];
    } else {
        // IE浏览器
        return obj.currentStyle[name];
    }


}

/*
    定义一个移动div的函数
    - obj 执行动画的对象
      target 目标位置
      speed 速度
      style 样式
      callback 回调函数
*/
function move(obj, target, speed, style, callback) {
    // 获取当前div的位置
    var current = parseInt(getStyle(obj, style));
    // 判断速度的正负
    if (current > target) {
        speed = -speed;
    }
    // 由于每点击一次就会开启一个定时器，所以每次都需要关闭前一个定时器
    clearInterval(obj.timer);
    // 创建一个定时器
    obj.timer = setInterval(function () {
        // 获取方块left初始值  parseInt()可以将字符串转换为数字，即获取有效值
        var oldleft = parseInt(getStyle(obj, style));
        // 赋予方块left新值
        var newleft = oldleft + speed;
        // 当到达1000px时停下
        if (newleft < target && speed < 0 || newleft > target && speed > 0) {
            newleft = target;
        }
        // 为方块left设置新值
        obj.style[style] = newleft + 'px';

        if (newleft == target) {
            clearInterval(obj.timer);
            callback && callback();

        }

    }, 30);


}