JavaScript实现小球移动(二)

这次采用了封装函数的方法,将小球向左向右移动封装在同一个函数内。

代码:

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: red;
            border-radius: 50%;
            position: absolute;
            left: 100px;
            top: 200px
        }

        #wall_l {
            width: 1px;
            height: 300px;
            background-color: black;
            position: absolute;
            left: 99px;
            top: 150px;
        }

        #wall_r {
            width: 1px;
            height: 300px;
            background-color: black;
            position: absolute;
            left: 1200px;
            top: 150px;
        }
        #btndiv {
            width: 400px;
            height: 50px;
            margin-top: 50px;
            margin-left: 500px;
        }

        #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></div>
    <script>
        //1.查
        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 () {
            moveRorL(ball, 8, 1100)
        }

        btns[1].onclick = function () {
            moveRorL(ball, 8, 100)
        }

      
        btns[2].onclick = function () {
            moveRorL(ball, 8, 1100,function(){
                moveRorL(ball, 8, 100,function(){
                    moveRorL(ball, 8, 1100)
                })
            })
        }
        // target  speed   ball     callback 封装
    </script>
    <script>
        function moveRorL(obj, speed, target, callback) {
             //获取当前位置
             var l = obj.offsetLeft;
             if(l>target){
                speed=-speed
             }

            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //获取当前位置
                var l = obj.offsetLeft;
                var newl = l + speed;// 新的位置

                if (newl > target&&speed>0||newl<target&&speed<0) {
                    newl = target
                }
                //移动到了一个新的位置
                obj.style.left = newl + 'px';

                if (newl == target) {
                    clearInterval(obj.timer);
                    callback&&callback()              
                }

            }, 25)
        }

    </script>
</body>

</html>

运行效果图:

相关推荐
芦苇Z1 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
源猿人1 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin1 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖3 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬4 小时前
Promise 的场景和最佳实践
前端·javascript
Asort4 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio4 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly4 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果4 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
普郎特4 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript