JavaScript代碼怎樣實(shí)現(xiàn)移動端的秒殺倒計(jì)時(shí)效果？

1.功能分析

倒計(jì)時(shí)需要實(shí)現(xiàn)以下3個(gè)效果：

(l)設(shè)置初始的倒計(jì)時(shí)時(shí)間：

(2)如果倒計(jì)時(shí)時(shí)間已經(jīng)完成清除定時(shí)器;

(3)如果倒計(jì)時(shí)時(shí)間沒有完成，獲取剩余時(shí)間中的時(shí)分秒并顯示在頁面中。

2.代碼實(shí)現(xiàn)

(1)實(shí)現(xiàn)秒殺倒計(jì)時(shí)效果，首先在index.js文件中的window.onload=function(){}方法中添加wnTime()方法，然后在后面編寫downTime()的具體實(shí)現(xiàn)，具體代碼如下：

window.onload=function () {
  serach();            //搜索欄
  downTime();          //倒計(jì)時(shí)
};
//倒計(jì)時(shí)
function downTime() {
  var spans=document.querySelector('.sk_time').querySelectorAl1('span');
  var totalTime=l*60*60;
  var timer=setInterval(()=> {                  //開啟定時(shí)器
    totalTime--;
    if(totalTime<0) {                           //判斷倒計(jì)時(shí)時(shí)間是否已經(jīng)完成
      clearInterval(timer);                     //清除定時(shí)器
      return;
    }
    //獲取刺余時(shí)間中的 時(shí)分秒
    var h=Math.floor(totalTime/3600);           //獲取小時(shí)數(shù)
    var m=Math.floor(totalTime3600/60);         //獲取分鐘數(shù)
    var s=Math.floor(totalTime%60);             //獲取秒鐘數(shù)
    // 賦值，將時(shí)間填虎到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行代碼獲取所有用于展示時(shí)間的span元素：第8行代碼設(shè)置初始的倒計(jì)時(shí)時(shí)間totalTime(以秒為單位);第l1～14行代碼判斷倒計(jì)時(shí)時(shí)間是否已經(jīng)完成，當(dāng)?shù)褂?jì)時(shí)時(shí)間totalTime小于0時(shí)清除定時(shí)器;第16~18行代碼獲取倒計(jì)時(shí)剩余時(shí)間的時(shí)分秒;第20~26行代碼使用span[下標(biāo)].innerHTML設(shè)置指定標(biāo)簽之間的HTML內(nèi)容。其中，下標(biāo)為0代表第一個(gè)span元素，依此類推。保存上述代碼，在瀏覽器中查看倒計(jì)時(shí)效果，如圖所示。