基础运动函数的封装

最新推荐文章于 2022-03-10 08:18:14 发布

Hi_Eleven

最新推荐文章于 2022-03-10 08:18:14 发布

阅读量195

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Hi_Eleven/article/details/107578614

版权

<!DOCTYPE html>
<html lang="en">
<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;
          border-radius: 50%;
          background: red;
          position: absolute;
          left: 0px;
          top: 0px;
        }
      </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    //1 获取节点
    let boxObj = document.querySelector('#box');
    // 2 绑定点击事件
    document.addEventListener('click',()=>{
        startMove(boxObj,{left:500,top:600}, function(){
            alert('game over')
        })
    })
    let time = '';
    //运动函数的封装
    function startMove(eleObj,obj,fn){
        //3 清除定时器，防止累加
        clearInterval(time);
        let onOff = false;
        // 4 设置定时器
        time = setInterval(()=>{
            // let onOff = false;
            //5 遍历运动方向和目标
            for(var attr in obj){
                //6 获取实时位置
                let pos = parseInt(getPos(eleObj,attr));
                // 7 设置步长值
                let speed = (obj[attr]-pos)/10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                // 8 临界值的判断，到达临界值给开关true，避免直接清空定时器，影响另一个属性运动
                if( pos + speed == obj[attr]){
                    // console.log('3343')
                    onOff = true;
                }
                // 9 让元素动起来
                boxObj.style[attr] = pos + speed + 'px';
                    
            }
            if(onOff){
                    //清空定时器
                    clearInterval(time);

                if(fn) fn();
                } 
        },50);
    }
    // 获取元素的指定的css属性的值
    function getPos(ele,attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele)[attr];
        }
    }
</script>
</html>