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

1.功能分析

倒計時需要實現(xiàn)以下3個效果：

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

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

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

2.代碼實現(xiàn)

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

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