效果图如下：
当用户第一次看到这个页面时，按钮是不可点击的，并显示一个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，使得按钮可以被点击 - 更新按钮的文字为“同意协议”
定时器常用来做以下几件事：
- 延迟执行代码：有时候我们不希望某段代码立即执行，而是希望在一段时间后执行，比如用户登录后延迟一段时间跳转到另一个页面。
- 轮询：比如实时聊天功能，会定时向服务器发送请求，获取最新的消息。
- 动画效果：通过定时器来不断改变元素的样式，实现动画效果。
- 倒计时功能：比如电商促销活动中的倒计时，或者是抢购时的倒计时。
![[linux 驱动]网络设备驱动详解](https://img-blog.csdnimg.cn/img_convert/9655313f12db208661f60648e5c8bfac.png)
![[瑞吉外卖]-05菜品模块](https://img-blog.csdnimg.cn/img_convert/1be74edf4a559132e9d3fa92fda175bd.png)
