JavaScriptAPI碰壁反弹案例

最新推荐文章于 2023-05-08 18:26:24 发布

山有扶苏..

最新推荐文章于 2023-05-08 18:26:24 发布

阅读量219

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/luobifeiyeshi0/article/details/129823415

版权

本文通过实例讲解如何使用JavaScript实现小球在HTML页面中碰壁反弹的效果，包括静态页面搭建、动态页面设置，涉及元素获取、事件绑定及定时器回调函数的应用。

摘要由CSDN通过智能技术生成

文章目录

小球碰壁反弹案例
一、静态页面搭建
二、动态页面设置

小球碰壁反弹案例

思路：先搭建静态页面，将小球放在大盒子中，写入一个开始按钮和一个暂停按钮。再设置动态效果，当点击开始按钮时，小球开始运动，碰到大盒子边框时反弹；点击暂停按钮时，小球停止运动（给大盒子相对定位，小球绝对定位）。

一、静态页面搭建

<head>
    <style>
        * {
     
            padding: 0;
            margin: 0;
        }
        #parent {
     
            position: relative;
            width: 800px;
            height: 500px;
            border: 10px dotted red;
        }
        #child {
     
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: aqua;
        }
        button {
     
            margin: 10px 138px;
            padding: 20px 50px;
        }
    <