• 29 Countdown Timer 中文指南
    • 挑战任务
    • 实现效果
    • 编程思路
    • 过程指南
    • 延伸思考

    29 Countdown Timer 中文指南

    本篇作者:©大史快跑Dashrun——Chinasoft Frontend Developer

    简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 29 篇。完整指南在 GitHub,喜欢请 Star 哦♪(^∇^*)

    创建时间:2017-11-6
    最后更新:2017-11-12

    挑战任务

    初始文档index-start.html中提供了一个倒计时控制器,从html文档的结构可以看出,顶部的按钮可以用来增加倒计时时间,常用的时间间隔已将参数绑定在data-time属性上;display类用来显示计时的结果。
    本次编程挑战的任务是通过javascript代码基于当前时间生成一个倒计时,将结束时间剩余时间分别显示在diaplay__time-left类标签和display__end-time类标签上。

    实现效果

    结果展示

    编程思路

    监听按点击事件click来为倒计时增加时间,使用setInterval函数每秒执行判断函数,若倒计时事件到,则清除当前计时器,若时间未到,则计算并刷新页面上应该显示的时间。

    过程指南

    1.定义变量及获取需要操作的DOM元素的引用。

    1. const endTime = document.querySelector(".display__end-time");
    2. const leftTime = document.querySelector(".display__time-left");
    3. const buttons = document.querySelectorAll("button");
    4. const date = new Date();
    5. var left = 0;//剩余时间
    6. var end = 0;//结束时间
    7. var timer;//interval计时器
    8. leftTime.innerHTML = left;//未操作时,剩余时间显示0

    2.为button绑定点击事件,当按钮点击时执行对应的回调函数。

    1. const arr = Array.from(buttons);
    2. arr.map(function(item){
    3. item.addEventListener('click',clickAction);
    4. });

    3.监听表单的提交事件,注意表单的调用方式。

    1. document.customForm.addEventListener('submit',function(e){
    2. e.preventDefault();
    3. updateTime(this.minutes.value*60);
    4. updateTimer();
    5. });

    4.点击后的回调函数中取得点击按钮传递的秒数,调用updateTime()函数更新页面显示结果,并调用updateTimer()来更新计时器相关动作.

    1. function clickAction(e){
    2. let deltaTime;
    3. deltaTime = this.dataset.time;//取得data-time属性的值
    4. updateTime(deltaTime);
    5. //点击后更新计时器
    6. updateTimer();
    7. }

    5.updateTime()函数用来更新和页面相关的显示信息。

    1. function updateTime(delta){
    2. left = left + parseInt(delta,0);
    3. end = date.getTime() + left*1000;
    4. leftTime.innerHTML = left;
    5. endTime.innerHTML =new Date(end).toLocaleTimeString();
    6. }

    6.updateTimer()函数用来执行和设定每秒检查计时器是否需要继续工作的逻辑判断。

    1. function updateTimer(){
    2. //清除以前的timer,如果不清除,新生成的定时器会和以前的定时器叠加在一起,均会生效。
    3. if(timer){
    4. clearInterval(timer);
    5. }
    6. // 设置新的Timer
    7. timer = setInterval(function(){
    8. if(left == 0){
    9. endTime.innerHTML = 'End';
    10. clearInterval(timer);
    11. }else{
    12. left -= 1;
    13. leftTime.innerHTML = left;
    14. }
    15. },1000);
    16. }

    延伸思考

    本次代码中前后会定义定时器和清除定时器,另一种做法是定时器一直工作不清除,对应的按钮和表单只修改时间,不用调整定时器,当值发生变化后,下一秒定时器检测时就会开始倒计时,这样代码逻辑上会有所简化,感兴趣的朋友可以自行练习。