JS匀速运动案例01

最新推荐文章于 2024-11-16 14:11:26 发布

李小毅&

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量107

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45179355/article/details/125812807

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js匀速运动案例</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            position: relative;
        }
        #btn{
            width: 80px;
            height: 30px;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 50px;
        }
    </style>
</head>
<body>
<button id="btn">动起来！</button>
<div id="box"></div>
<script>
    // 1、获取事件源=>btn按钮和box盒子
    var btn = document.getElementById('btn')
    var box =document.getElementById('box')
    var timer = null
    // 2、为按钮设置点击事件
    btn.onclick =function () {
        // 设置定时器,通过子绝父相,改变盒子的left值实现盒子移动
        // 点击按钮会使盒子运动速度加快解决方法,每次点击按钮先清除定时器设置
        clearInterval(timer)
        timer = setInterval(function () {
            // 通过box.offsetLeft值获取距离父级盒子左部距离
            // 遇到的bug问题:
            //     (1)点击按钮会使盒子运动速度加快
            //     (2)点击之后没有办法停下来
            if (box.offsetLeft === 500){
                clearInterval(timer)
            }else {
                box.style.left = box.offsetLeft + 10 + 'px'
            }
        },30)
    }
</script>
</body>
</html>