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>

运行效果图:

相关推荐
Qter_Sean31 分钟前
自己动手写Qt Creator插件
开发语言·qt
何曾参静谧35 分钟前
「QT」文件类 之 QIODevice 输入输出设备类
开发语言·qt
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
静止了所有花开1 小时前
SpringMVC学习笔记(二)
笔记·学习
我不当帕鲁谁当帕鲁2 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂2 小时前
工程化实战内功修炼测试题
前端·javascript
爱吃生蚝的于勒2 小时前
C语言内存函数
c语言·开发语言·数据结构·c++·学习·算法
小白学大数据4 小时前
Python爬虫开发中的分析与方案制定
开发语言·c++·爬虫·python
冰芒猓4 小时前
SpringMVC数据校验、数据格式化处理、国际化设置
开发语言·maven
失落的香蕉4 小时前
C语言串讲-2之指针和结构体
java·c语言·开发语言