29 Countdown Timer 中文指南

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

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

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

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

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

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

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

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

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

function updateTimer(){
    //清除以前的timer,如果不清除，新生成的定时器会和以前的定时器叠加在一起，均会生效。
        clearInterval(timer);
    // 设置新的Timer
    timer = setInterval(function(){
    if(left == 0){
        endTime.innerHTML = 'End';
        clearInterval(timer);
    }else{
        left -= 1;
        leftTime.innerHTML = left;
    }