第 3 章：H5 内置控件
1. 阅读参考资料
1.1. 文本框类
1.2. 按钮类
1.3. 弹框类
1.4. 列表类
1.5. 时间日期类
1.6. 其他
2. 作业统一说明
- 如果没有特别说明，后续任务代码放到 spa 仓库下
- spa 仓库需要同步到 bitbucket 远程仓库和 gogs 远程仓库
- spa 仓库需要用 webpack 进行自动化构建
- 实现 HTML、CSS、JavaScript 静态代码检查构建任务
- 实现 HTML、CSS、JavaScript 压缩构建任务
- 如有必要，添加单元测试构建任务
- 使用 drone 自动发布代码为 docker 镜像
3. 定时器按钮
基本要求：
- 创建 01-timer-button 目录
- 使用 H5 内置控件实现
- 按钮初始状态为禁用
- 禁用状态下，点击按钮，不会有任何响应
- 倒计时 6 秒
- 每隔一秒按钮文字显示剩余秒数
- 倒计时结束后，按钮状态为启用
- 启用状态下，点击按钮，会弹出 alert 弹框
示例参考：
4. 密码可见
基本要求：
- 创建 02-password-visual 目录
- 使用 H5 内置控件实现
- 在文本框中输入任意字符，并不显示输入的字符，而显示为“点”（隐藏密码）
- 文本框的右侧有眼睛闭合的图标
- 当鼠标移到眼睛图标时
- 密码框中的密码可以正常显示
- 眼睛关闭的图标变成眼睛睁开的图标
- 当鼠标移出眼睛图标时
- 密码框中的密码不可见
- 眼睛睁开的图标变成眼睛闭合的图标
- 密码框设置为初始焦点
示例参考：
5. 滑杆
基本要求：
- 创建 03-range 目录
- 使用 H5 内置控件实现
- 用滑杆控件输入自己的年龄，滑杆的最小值为 0，最大值为 100
- 滑块拖动后，下方显示年龄数据
- 初始滑块位于最左边，下方的年龄数据为 0 岁
示例参考：
6. 进度条
基本要求：
- 创建 04-progress 目录
- 使用 H5 内置控件实现
- 用进度条控件模拟下载文件的进度
- 进度条控件下方有三个按钮：开始、暂停和重置
- 开始按钮点击后，进度条显示下载进度
- 暂停按钮点击后，下载进度暂停
- 重置按钮点击后，下载进度条恢复初始状态
- 多次点击开始按钮，点击一次暂停按钮，要求进度条能够暂停
示例参考：