js缓冲运动未封装之前

最新推荐文章于 2024-12-14 17:33:57 发布

划水的乌贼

最新推荐文章于 2024-12-14 17:33:57 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js html5 css3

本文链接：https://blog.youkuaiyun.com/dergfg/article/details/112192163

js 专栏收录该内容

45 篇文章

订阅专栏

保存对代码的热爱并保存怀疑态度
这是未封装之前的，明天发封装的，一共分了三部分，小白我还未研究清楚，见谅
注释齐全，绝对是最齐全的我都恨不得写篇论文出来

<!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: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: violet;
            position: absolute;
            left: 500px;
            /* left:1200px;    就是这个 */
            top: 0px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    var obox=document.getElementById("box");
    var target=800;   //  想右移动
   // 向左移动为负的    向左可能不便于看见，需要看的话将box的css的left位置改为1200px
    var t;   //计时器

    document.onclick=function(){
        clearInterval(t);  //开始先清空一次计时器，防止多次触发
        t=setInterval(() => {
            // var speed=Math.ceil((target-obox.offsetLeft)/50);   
            //总共的距离等于目标减去盒子的距离,  向上取整，因为浏览器执行的时候会忽略小于1像素的。
            // 所以计算器并未停止，可以打印一下看一下spend   0.78=1
             // 计算步长：(目标 - 当前)的50分之一，这个可以自行设置


            // var speed=Math.floor((target-obox.offsetLeft)/50);   
            // 同上 向下取整，因为浏览器执行的时候会忽略小于1像素的。   -0.78=0

            var speed=(target-obox.offsetLeft)/50;  
            //所以可以写一个if判断语句
            // if(speed>0){
            //     speed=Math.ceil(speed);
            // }else{
            //     speed=Math.floor(speed)
            // }

            //符合三目表达式所以可以简写  不要忘记是speed等于,我自己老是忘记,比如switch的break,我也老是忘记导致穿透
            speed=speed>0? Math.ceil(speed) : Math.floor(speed)


            if(obox.offsetLeft===target){     //判断是否到达终点
                clearInterval(t)
            }else{
                obox.style.left=obox.offsetLeft+speed+"px";
                console.log(speed);   //看数值
            }
            
        }, 30);
    }


</script>
</html>