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>

运行效果图:

相关推荐
月屯2 分钟前
docke笔记下篇
笔记
百思可瑞教育3 分钟前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
浪扼飞舟5 分钟前
c#基础二(类和对象,构造器调用顺序、访问级别、重写和多态、抽象类和接口)
java·开发语言·c#
yuanpan21 分钟前
python标准库有哪些模块,简单总结下。
开发语言·python
听情歌落俗28 分钟前
MATLAB3-2数据存储-台大郭彦甫
开发语言·数学建模·matlab·矩阵
云天徽上1 小时前
【数据可视化-112】使用PyEcharts绘制TreeMap(矩形树图)完全指南及电商销售数据TreeMap绘制实战
开发语言·python·信息可视化·数据分析·pyecharts
能不能别报错1 小时前
K8s学习笔记(二):Pod
笔记·学习·kubernetes
呱呱巨基1 小时前
C/C++ 内存管理
c++·笔记·学习
星语卿2 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11252 小时前
界面规范11-对话框
javascript·vue.js·elementui