Encapsulation of motion function in js

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
    
    
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

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

    <script>
        // 运动三要素: 运动对象  运动方向  停止目标
        // ele 运动的元素对象
        // target {left:500,top:400}  运动方向和目标
        // cb 运动结束的回调函数


        //1 获取目标节点
        let boxObj = document.getElementById('box');
        boxObj.onclick = function () {
    
    
            moveFn(boxObj, {
    
     top: 300, left: 400 }, function () {
    
    
                alert('game over')
            })
        }
        var times = '';  //声明遍历接收定时器的返回值
        function moveFn(eleObj, target, cb) {
    
    
            //2  清空定时器,避免定时器累加
            clearInterval(times);
            var onOff = false;
            //3 设置定时器
            times = setInterval(function () {
    
    
                // 4  遍历运动的方向和目标,方便设置速度
                for (var attr in target) {
    
    
                    // console.log(attr, target[attr]); // top,300     left,400
                    var pos = parseInt(getPos(eleObj, attr))
                    //5 声明步长,并且调整
                    var speed = (target[attr] - pos) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //6临界条件判断,到达临界值给开关true,避免直接清空定时器
                    //影响另一个属性运动
                    if (pos + speed == target[attr]) {
    
    
                        onOff = true;
                    }
                     //7 给元素属性赋值,让元素动起来
                    eleObj.style[attr] = pos + speed + 'px';
                }          
                    if (onOff) {
    
    
                        clearInterval(times)
                        //判断是否有回调函数,存在就调用
                        if (cb) cb()
                    }
            }, 30)
        }


        //获取指定元素非行内样式css属性(兼容模式)
        function getPos(ele, attr) {
    
    
            if (ele.currentStyle) {
    
    
                return ele.currentStyle[attr]
            } else {
    
    
                return getComputedStyle(ele)[attr]
            }
        }
    </script>
</body>

</html>
Encapsulation of motion function in js

Guess you like
