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>

运行效果图:

相关推荐
demi_meng7 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
QX_hao7 小时前
【Go】--map和struct数据类型
开发语言·后端·golang
你好,我叫C小白7 小时前
C语言 循环结构(1)
c语言·开发语言·算法·while·do...while
千码君20168 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
Evand J9 小时前
【MATLAB例程】基于USBL和DVL的线性回归误差补偿,对USBL和DVL导航数据进行相互补偿,提高定位精度,附代码下载链接
开发语言·matlab·线性回归·水下定位·usbl·dvl
Larry_Yanan10 小时前
QML学习笔记(四十二)QML的MessageDialog
c++·笔记·qt·学习·ui
爱喝白开水a10 小时前
LangChain 基础系列之 Prompt 工程详解:从设计原理到实战模板_langchain prompt
开发语言·数据库·人工智能·python·langchain·prompt·知识图谱
Neverfadeaway10 小时前
【C语言】深入理解函数指针数组应用(4)
c语言·开发语言·算法·回调函数·转移表·c语言实现计算器
武子康10 小时前
Java-152 深入浅出 MongoDB 索引详解 从 MongoDB B-树 到 MySQL B+树 索引机制、数据结构与应用场景的全面对比分析
java·开发语言·数据库·sql·mongodb·性能优化·nosql
杰克尼10 小时前
JavaWeb_p165部门管理
java·开发语言·前端