JavaScript定时器与动态效果实现讲解

"JavaScript基础-定时器" 在JavaScript中，定时器是实现各种动态效果和自动化任务的关键工具。本课件主要介绍了两种定时器：`setInterval` 和 `setTimeout`，以及如何停止定时器，创建实用的效果如4数码时钟和延时提示框，以及无缝滚动效果。 1. **定时器的使用与作用** - 定时器用于在特定的时间间隔后执行指定的函数或代码块。 - `setInterval` 是间隔型定时器，它会每隔一定时间重复执行某段代码，直到被清除。 - `setTimeout` 是延时型定时器，只会在指定延迟后执行一次代码。 2. **两种定时器的区别** - `setInterval` 的特点是周期性执行，如果不手动停止，它会无限循环。 - `setTimeout` 则是一次性的，执行完指定任务后不会再次触发。 3. **停止定时器** - 使用 `clearInterval` 可以停止 `setInterval` 创建的定时器。 - 使用 `clearTimeout` 可以取消 `setTimeout` 设置的延时。 4. **4数码时钟效果** - 通过获取系统时间的 `Date` 对象，可以获取小时（`getHours`）、分钟（`getMinutes`）和秒数（`getSeconds`）。 - 使用字符串连接和空位补零的方法来格式化时间显示。 - 图片路径的设置和 `charAt` 方法可用于处理数字显示。 5. **Date对象的其他方法** - `getFullYear()` 获取四位数的年份。 - `getMonth()` 返回月份（注意，返回值是从0开始的）。 - `getDate()` 获取月份中的日期。 - `getDay()` 返回一周中的星期几（0表示周日，1表示周一，以此类推）。 6. **延时提示框效果** - 通过修改 `mouseover` 和 `mouseout` 事件，可以实现鼠标移入显示提示，移出后延迟隐藏的效果。 - 简化代码可以提高可读性和效率。 7. **无缝滚动效果演示** - 物体运动基础涉及 `offsetLeft` 属性，用于获取元素的左边缘距离其最近的定位父元素的距离，从而实现元素的移动。 - 使用定时器让物体连续移动，结合 `innerHTML` 和 `+=` 操作，可以实现内容的动态更新。 - 滚动过界后，通过调整 `ul` 的 `width` 和重新设定位置，实现无缝滚动效果。 8. **改变滚动方向和鼠标移入暂停** - 修改 `speed` 和判断条件可以改变滚动方向。 - 鼠标移入时，可以通过关闭定时器实现暂停滚动；移出时，重新开启定时器，恢复滚动。 通过以上知识点的学习，开发者能够掌握JavaScript定时器的基本用法，并能运用到实际项目中，创造出各种动态效果和交互体验。