Day29 - Countdown Timer
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
效果如下
第20天的挑战是,设置一个倒计时时间,接下来开始倒计时。
HTML代码
1 |
|
- 上面的
button
中自定义的data-time
为倒计时时间,以秒为单位。 form
为自定义倒计时时间,以分为单位。- class为
display__time-left
的div主要为了展示倒计时的动态。 - class为
display__end-time
的div主要为了展示倒计时什么时候结束。
CSS 代码
1 | html { |
JS代码实现逻辑
1 | let countdown; |
逻辑分析:
- 当点击button按钮时,调用
startTimer
方法。
1 | buttons.forEach(button => button.addEventListener('click', startTimer)); |
- 在输入框中自定义倒计时时间时,输入
enter
时调用传入的回调函数。
1 | document.customForm.addEventListener('submit', function (e) { |
- startTimer函数代码解释
1 | function startTimer() { |
- displayTimeLeft代码
1 | <!--计算时分秒,并且展示--> |
- displayEndTime代码
1 | <!--计算倒计时结束时间,并且展示--> |
- timer代码
1 | function timer(seconds) { |