效果图如下：
当用户第一次看到这个页面时，按钮是不可点击的，并显示一个5秒的倒计时。倒计时结束后，按钮变为可点击状态，并显示“同意协议”。这样做的目的是确保用户有足够的时间阅读用户协议。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><textarea name="" id="" cols="30" rows="10">用户注册协议
欢迎注册成为京东用户!在您注册过程中，您需要完成我们的注册流程并通过
欢迎注册成为京东用户!在您注册过程中，您需要完成我们的注册流程并通过</textarea><br><button class="btn" disabled>(5)我已经阅读该用户协议</button><!-- disabled 属性 按钮不能点击 --><script>// 1.获取元素const btn = document.querySelector('.btn')// 2.倒计时let i = 5// 2.1 开启倒计时let n = setInterval(function () {i--// 2.2 更新里面的内容btn.innerHTML = `(${i})我已经阅读该用户协议`if (i === 0) {// 2.3 倒计时完了 关闭计时器 打开按钮clearInterval(n) // 关闭计时器btn.disabled = false // 打开按钮btn.innerHTML = '同意协议' // 修改按钮内容}}, 1000)</script>
</body></html>代码理解：
- 首先，通过
document.querySelector获取了一个按钮元素，并把它赋值给变量btn - 设置一个变量
i，并初始化为5，这个变量用来表示倒计时的时间 - 使用
setInterval设置一个每秒执行一次的定时器，这个定时器的功能是：
- 每次执行时，先将变量
i减1 - 更新按钮内的文字，显示当前的倒计时
- 当
i变为0时，使用clearInterval清除定时器，这样定时器就不会再执行了 - 同时，将按钮的
disabled属性设置为false，使得按钮可以被点击 - 更新按钮的文字为“同意协议”
定时器常用来做以下几件事：
- 延迟执行代码：有时候我们不希望某段代码立即执行，而是希望在一段时间后执行，比如用户登录后延迟一段时间跳转到另一个页面。
- 轮询：比如实时聊天功能，会定时向服务器发送请求，获取最新的消息。
- 动画效果：通过定时器来不断改变元素的样式，实现动画效果。
- 倒计时功能：比如电商促销活动中的倒计时，或者是抢购时的倒计时。
