首頁(yè)技術(shù)文章正文

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

更新時(shí)間:2023-11-10 來(lái)源:黑馬程序員 瀏覽量:

1.功能分析

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

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

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

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

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(()=> {                  //開(kāi)啟定時(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í)效果,如圖所示。

1699611275715_掌上秒殺.png

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!