一、需求分析

1、需求：按钮5秒之后才可以使用

视频加载中...

2、分析：

①：开始先把按钮禁用（disabled 属性）

②：获取元素

③：函数内处理逻辑

｛

秒数开始减减

按钮里面时间随之变化，开始倒计时

如果秒数等于0 停止定时器，里面文字变为同意并继续，按钮可以点击确认

｝

二、HTML代码准备

在HbuilderX中新建项目：阅读协议，同时如下准备HTML代码

其中button标签内加了disabled属性，使按钮处于不可选中状态

HTML结构

三、CSS样式设置

1、在CSS文件夹中新建CSS样式文件：index.css，并将外部的CSS文件index.css写入到index.html文件中

外部CSS文件

链接外部CSS文件

2、设置各元素的样式

CSS样式设置

四、倒计时功能实现

1、在js文件夹中新建js文件：index.js，并将外部的js文件index.js写入到index.html文件中

写入js文件

2、获取button元素

获取botton元素

3、设置倒计时

设置倒计时

4、创建定时器

5、当倒计时为0时，需要关闭定时器、按钮状态改为可选中、文字内容修改为：同意并继续

创建定时器