原生JavaScript实现动态弹跳小球示例

在本文档中，作者分享了一个使用原生JavaScript实现的简单弹跳小球案例。该案例的主要目标是创建一个可以在网页上自动弹跳的圆形元素，通过模拟小球在二维空间中的运动来吸引读者的兴趣。以下是关键知识点的详细解析： 1. **HTML结构**: - 文档包含了HTML部分，其中包括一个id为"box"的div元素，这个大容器设置了宽高、背景色、阴影和居中显示。此外，还定义了一个id为"cir"的小圆形元素（div）作为弹跳主体，以及一组额外的div元素用于创建动态效果。 2. **CSS样式**: - CSS代码定义了样式规则，如清除默认的margin和padding，设置容器和小球的基本样式。`#box`被定位为相对定位，设置了宽度、高度、背景色、阴影，并使其在屏幕中间水平垂直居中。`#cir`设置了圆形边框、白色背景和初始位置。 3. **JavaScript逻辑**: - 作者使用`getElementById`和`querySelectorAll`方法获取到容器和小球元素。变量`cirs`是一个数组，包含了所有动态元素。 - `collMove`函数是核心逻辑，它接受三个参数：容器元素、弹跳元素和弹跳速度。当弹跳元素碰到边界时，该函数会触发元素的反弹，同时更改其颜色以增加视觉反馈。 - `setInterval`函数被用来定时调用`collMove`，这使得小球可以按照预设的速度进行连续弹跳。 4. **动态行为**: - 通过调用`collMove`函数并传入不同的弹跳速度，每个小球具有不同的初始位置和运动速度。这实现了小球的多样性，增加了交互性。 5. **DOM操作**: - 通过JavaScript，作者操作DOM元素，包括获取元素的大小（`.offsetWidth` 和 `.offsetHeight`），以及修改元素的位置（通过`margin-left` 和 `top`）。这种操作展示了如何在浏览器环境中利用DOM API控制页面元素的行为。 这个案例向读者展示了如何运用JavaScript的基本操作（如DOM访问和样式更改）、事件处理（通过`setInterval`定时器）以及简单的动画效果来创建交互式的游戏或视觉效果。这对于学习JavaScript基础和理解事件驱动编程模型非常有用。通过这个例子，开发者可以实践和掌握如何在纯前端环境下实现简单的动画效果。