用js怎么實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)

在學(xué)習(xí)js的過(guò)程中,我們必須學(xué)會(huì)的一個(gè)技能就是用JS去敲一個(gè)倒計(jì)時(shí),在生活中我們也經(jīng)常會(huì)見(jiàn)到倒計(jì)時(shí),像“雙11”、“雙12”,“618”等等這些,在首頁(yè)是不是就經(jīng)常會(huì)看到倒計(jì)時(shí)這個(gè)東西。
下面我們來(lái)分析一下寫(xiě)倒計(jì)時(shí)需要什么????
1、首先我們需要用function函數(shù)
2、其次我們是不是最少需要4個(gè)數(shù)據(jù):天、時(shí)、分、秒
3、最后需要一個(gè)計(jì)時(shí)器setInterval

接下來(lái)我們看代碼及注釋理解

// 在HTML中寫(xiě)了一個(gè)h1標(biāo)簽,然后引入到j(luò)s中
   var h = document.getElementsByTagName("h1")[0];

   function daojiShi(storptimes) {
   var newtime = new Date() //獲取當(dāng)前時(shí)間
   var storptime = new Date(storptimes) //獲取截止時(shí)間

   var mistiming = storptime.getTime() - newtime.getTime() //   獲取截止時(shí)間距離現(xiàn)在的毫秒差

   var days = Math.floor(mistiming / 1000 / 60 / 60 / 24); //獲取天數(shù)   
   var hours = Math.floor(mistiming / 1000 / 60 / 60 % 24); // 獲取小時(shí)
   var minutes = Math.floor(mistiming / 1000 / 60 % 60); //獲取分鐘數(shù)
   var seconds = Math.floor(mistiming / 1000 % 60); //獲取秒數(shù)

// 判斷天、時(shí)、分、秒是不是兩位數(shù),如果是直接輸出,如果不是在前邊加個(gè)0;    
   days <10 ? days = "0"+days : days;    
   hours <10 ? hours = "0"+hours : hours;
   minutes <10 ? minutes = "0"+minutes : minutes;
   seconds <10 ? seconds = "0"+seconds : seconds;

// 第一種連接方法
   // var rels = days + "天" + hours + "時(shí)" + minutes + "分" + seconds + "秒";   
// 第二種連接方法
   var rels = `${days}天${hours}時(shí)${minutes}分${seconds}秒`

// 判斷時(shí)間差是不是正數(shù),就是截止時(shí)間是不是比現(xiàn)在的時(shí)間晚
   var mis = mistiming > 0? rels:"請(qǐng)輸入正確的時(shí)間"
   return  mis
}  

//用計(jì)時(shí)器去實(shí)現(xiàn)它
   setInterval(function(){
//把倒計(jì)時(shí)放在h1標(biāo)簽中
   h.innerHTML =  daojiShi("2019,8,5")
},1000)//時(shí)間我們?cè)O(shè)置1000毫秒,也就是1秒鐘

現(xiàn)在我們來(lái)看一下效果(恕在下只會(huì)截圖,在此謝罪)


1111.png

現(xiàn)在我們基本就把倒計(jì)時(shí)這個(gè)東西就搞完了?。。。?/p>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 背景 前端頁(yè)面倒計(jì)時(shí)功能在很多場(chǎng)景中會(huì)用到,如運(yùn)營(yíng)活動(dòng)開(kāi)始倒計(jì)時(shí)和活動(dòng)結(jié)束倒計(jì)時(shí),又如購(gòu)物網(wǎng)站的秒殺倒計(jì)時(shí),搶購(gòu)倒...
    kangaroo_v閱讀 3,395評(píng)論 2 7
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,880評(píng)論 1 45
  • 今天早上,我榮幸參加了市教育局組織的"珍愛(ài)生命,健康成長(zhǎng)"研討會(huì)。參加會(huì)議的有教育局相關(guān)科室和市內(nèi)三區(qū)教育...
    蔣邵萍閱讀 820評(píng)論 0 0
  • 今天問(wèn)兒子作業(yè)都安排好了嗎?他答得有些遲疑。“有什么需要解決的嗎?”“我寫(xiě)的不好,別人會(huì)不會(huì)笑話我?”“我看...
    柯南迷弟閱讀 207評(píng)論 0 0
  • 左右,是看臉型 前側(cè)光 高光,陰影,氛圍
    史德波閱讀 155評(píng)論 0 0

友情鏈接更多精彩內(nèi)容