定时器应用（函数封装）

最新推荐文章于 2024-05-06 18:48:38 发布

dengliao2950

最新推荐文章于 2024-05-06 18:48:38 发布

阅读量303

点赞数

文章标签：嵌入式

原文链接：http://www.cnblogs.com/zhuuuu/p/7596688.html

版权

定时器：setInterval(函数，时间) 两个参数

    setInterval() 重复执行    clearInterval() 清除定时
    setTimeout()  只执行一次  clearTimeout() 清除定时

回调函数endFn()

getStyle(obj, attr) 两个参数：1.获取谁(对象) 2.获取谁的什么样的样式名称

> < 不能传参

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            top: 50px;
            left: 20px;
        }
    </style>
</head>

<body>
    <input id="btn1" type="button" value="后">
    <input id="btn2" type="button" value="前">
    <div id="div1"></div>
    <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var div = document.getElementById("div1");
        // var timer="";
        btn2.onclick = function () {
            doMove(div, "left", 12, 600, function () {
                doMove(div, "top", 20, 400);
            });
        }
        // btn1.onclick = function () {
        //     doMove(div, 12, 10);
        // }
        function doMove(obj, attr, dir, target, endFn) {//1.对象 2.left/top 3.多少px 4.目的地 5.回调函数
            dir = parseInt(getStyle(obj, attr)) < target ? dir : -dir;
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var speed = parseInt(getStyle(obj, attr)) + dir;//   attr:left/top
                // if (speed > target && dir > 0) {//往前
                //     speed = target;
                // }
                // if (speed < target && dir < 0) {//往后
                //     speed = target;
                // }
                if (speed > target && dir > 0 || speed < target && dir < 0) {
                    speed = target;
                }
                obj.style[attr] = speed + "px";
                if (speed == target) {
                    clearInterval(obj.timer);
                    if (endFn) {
                        endFn();
                    }
                }
            }, 30);

        }
        function getStyle(obj, attr) {
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
        }
    </script>
</body>

</html>

转载于:https://www.cnblogs.com/zhuuuu/p/7596688.html