JavaScript实现小球向左向右移动

最新推荐文章于 2024-07-30 10:56:44 发布

shan33__

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量406

点赞数 12

分类专栏：经典例题文章标签： javascript 前端开发语言 html ecmascript 学习

本文链接：https://blog.csdn.net/shan33__/article/details/136555866

版权

经典例题专栏收录该内容

41 篇文章 1 订阅

订阅专栏

问题描述：请使用JavaScript相关知识实现小球在固定范围内向左向右移动，并实现点击开始按钮小球移动，点击暂停按钮小球停止移动。

关键代码：

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        #ball {
            width: 100px;
            height: 100px;
            background-color: rgb(4, 59, 15);
            border-radius: 50%;
            position: absolute;
            left: 50px;
            top: 100px;
        }

        #wall_l {
            width: 1px;
            height: 300px;
            position: absolute;
            top: 50px;
            left: 49px;
            background-color: brown;
        }

        #wall_r {
            width: 1px;
            height: 300px;
            position: absolute;
            top: 50px;
            left: 1000px;
            background-color: brown;
        }
        #btndiv{
            width: 400px;
            height: 50px;
            margin-left: 300px;
        }
        #btndiv button{
            padding: 0px 20px;
            margin: 0px 10px;
        }
    </style>
</head>

<body>
    <div id="ball"></div>
    <div id="wall_l"></div>
    <div id="wall_r"></div>
    <div id="btndiv">
        <button>向右</button>
        <button>向左</button>
        <button>开始</button>
        <button>暂停</button>
    </div>
   
    <script>
        var ball = document.querySelector('#ball');
        var wall_l = document.querySelector('#wall_l');
        var wall_r = document.querySelector('#wall_r');
        var btns = document.querySelectorAll('button');
        //   向右
        btns[0].onclick = function () {
            mover();
        }
        var timer;

        function mover() {
            var speed = 7; //偏移量
            var target = wall_r.offsetLeft - 100;
            // 结束位置
            clearInterval(timer);
            timer = setInterval(function () {
                // 获得当前位置
                var l = ball.offsetLeft;
                var newl = l + speed;
                if (newl > target) {
                    newl = target;
                }
                ball.style.left = newl + 'px';
                if (newl == target) {
                    // clearInterval(timer);
                    // if (move()) {
                    movel();
                    // }
                }

            }, 25)
        }



        // 向左
        btns[1].onclick = function () {
            movel();
        }

        function movel() {
            var speed = 7; //偏移量
            var target = wall_l.offsetLeft;
            // 结束位置
            clearInterval(timer);
            timer = setInterval(function () {
                // 获得当前位置
                var l = ball.offsetLeft;
                var newl = l - speed;
                if (newl < target) {
                    newl = target;
                }
                ball.style.left = newl + 'px';
                if (newl == target) {
                    clearInterval(timer);
                    // if (move()) {
                    mover();
                    // }
                }

            }, 25)
        }


        //左右移动
        btns[2].onclick = function () {
            move();
        }

        function move() {
            mover();
        }
        btns[3].onclick = function () {
            clearInterval(timer);
        }
    </script>
</body>

</html>

运行效果：