JavaScript代码怎样实现移动端的秒杀倒计时效果？

1.功能分析

倒计时需要实现以下3个效果：

(l)设置初始的倒计时时间：

(2)如果倒计时时间已经完成清除定时器;

(3)如果倒计时时间没有完成，获取剩余时间中的时分秒并显示在页面中。

2.代码实现

(1)实现秒杀倒计时效果，首先在index.js文件中的window.onload=function(){}方法中添加wnTime()方法，然后在后面编写downTime()的具体实现，具体代码如下：

window.onload=function () {
  serach();            //搜索栏
  downTime();          //倒计时
};
//倒计时
function downTime() {
  var spans=document.querySelector('.sk_time').querySelectorAl1('span');
  var totalTime=l*60*60;
  var timer=setInterval(()=> {                  //开启定时器
    totalTime--;
    if(totalTime<0) {                           //判断倒计时时间是否已经完成
      clearInterval(timer);                     //清除定时器
      return;
    }
    //获取刺余时间中的 时分秒
    var h=Math.floor(totalTime/3600);           //获取小时数
    var m=Math.floor(totalTime3600/60);         //获取分钟数
    var s=Math.floor(totalTime%60);             //获取秒钟数
    // 赋值，将时间填虎到span中
    spans[0].inneriL=Math.floor(h/10);
    spans[1].innerHTML=Math.floor(h10);
    spans[3].innerHTML=Math.floor (m/10);
    spans[4].innerHTML=Math.floor(mê10);
    spans[6].innerHTML=Math.floor(s/10);
    spans[7].innerHTML=Math.floor(s&10);
  },1000);
}

上述代码中，第3行代码在window.onload=function()){}方法中添加downTime()方法：第7行代码获取所有用于展示时间的span元素：第8行代码设置初始的倒计时时间totalTime(以秒为单位);第l1～14行代码判断倒计时时间是否已经完成，当倒计时时间totalTime小于0时清除定时器;第16~18行代码获取倒计时剩余时间的时分秒;第20~26行代码使用span[下标].innerHTML设置指定标签之间的HTML内容。其中，下标为0代表第一个span元素，依此类推。保存上述代码，在浏览器中查看倒计时效果，如图所示。