JS基础编程课件13_JavaScript-DOM实战案例.pdf

JavaScriptDOM实战案例

王红元coderwhy

目录

1window定时器

content

2轮播消息提示

3关闭隐藏消息

4侧边栏展示

5tab切换实现

6王者荣耀轮播图

7常见的事件

coderwhywindow定时器方法

◼有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（schedulingacall）”。

◼目前有两种方式可以实现：

setTimeout允许我们将函数推迟到一段时间间隔之后再执行。

setInterval允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。

◼并且通常情况下有提供对应的取消方法：

clearTimeout：取消setTimeout的定时器；

clearInterval：取消setInterval的定时器；

◼大多数运行环境都有内置的调度程序，并且提供了这些方法：

目前来讲，所有浏览器以及Node.js都支持这两个方法；

所以我们后续学习Node的时候，也可以在Node中使用它们；

coderwhysetTimeout的使用

◼setTimeout的语法如下：

func|code：想要执行的函数或代码字符串。

➢一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做；

delay：执行前的延时，以毫秒为单位（1000毫秒=1秒），默认值是0；

arg1，arg2…：要传入被执行函数（或代码字符串）的参数列表；

◼clearTimeout方法：

setTimeout在调用时会返回一个“定时器标识符（timeridentifier）”，我们可以使用它来取消执行。

coderwhysetInterval的使用

◼setInterval方法和setTimeout的语法相同：

所有参数的意义也是相同的；

不过与setTimeout只执行一次不同，setInterval是每间隔给定的时间周期性执行；

◼clearInterval方法：

setInterval也会返回一个“定时器标识符（timeridentifier）”，我们可以通过clearInterval来取消这个定时器。

◼关于定时器还有一些宏任务相关的概念，我们会在JavaScript高级中讲解。

coderwhy案例实战一–轮播消息提示

coderwhy案例实战二–关闭隐藏消息

coderwhy案例实战三–侧边栏展示

coderwhy案例实战四–登录框（作业）

coderwhy案例实战五–王者荣耀tabControl

coderwhy案例实战六–王者轮播图

◼见上课代码

使用两种方案实现

coderwhy案例实战七–书籍购物车

◼见上课代码

作业二：添加功能购买数量中的增量和减少购买数量；