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

在學(xué)習(xí)js的過(guò)程中钱贯,我們必須學(xué)會(huì)的一個(gè)技能就是用JS去敲一個(gè)倒計(jì)時(shí)吹截,在生活中我們也經(jīng)常會(huì)見到倒計(jì)時(shí)厌处,像“雙11”鳖谈、“雙12”,“618”等等這些阔涉,在首頁(yè)是不是就經(jīng)常會(huì)看到倒計(jì)時(shí)這個(gè)東西缆娃。
下面我們來(lái)分析一下寫倒計(jì)時(shí)需要什么?瑰排?贯要??
1椭住、首先我們需要用function函數(shù)
2崇渗、其次我們是不是最少需要4個(gè)數(shù)據(jù):天、時(shí)京郑、分宅广、秒
3、最后需要一個(gè)計(jì)時(shí)器setInterval

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

// 在HTML中寫了一個(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è)東西就搞完了4甭搿s孕荨!症副!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末店雅,一起剝皮案震驚了整個(gè)濱河市政基,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌闹啦,老刑警劉巖沮明,帶你破解...
    沈念sama閱讀 206,968評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異窍奋,居然都是意外死亡荐健,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門琳袄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)江场,“玉大人,你說(shuō)我怎么就攤上這事窖逗≈贩瘢” “怎么了?”我有些...
    開封第一講書人閱讀 153,220評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵碎紊,是天一觀的道長(zhǎng)佑附。 經(jīng)常有香客問(wèn)我,道長(zhǎng)矮慕,這世上最難降的妖魔是什么帮匾? 我笑而不...
    開封第一講書人閱讀 55,416評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮痴鳄,結(jié)果婚禮上瘟斜,老公的妹妹穿的比我還像新娘。我一直安慰自己痪寻,他們只是感情好螺句,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著橡类,像睡著了一般蛇尚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上顾画,一...
    開封第一講書人閱讀 49,144評(píng)論 1 285
  • 那天取劫,我揣著相機(jī)與錄音,去河邊找鬼研侣。 笑死谱邪,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的庶诡。 我是一名探鬼主播惦银,決...
    沈念sama閱讀 38,432評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了扯俱?” 一聲冷哼從身側(cè)響起书蚪,我...
    開封第一講書人閱讀 37,088評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎迅栅,沒想到半個(gè)月后殊校,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡读存,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2 325
  • 正文 我和宋清朗相戀三年箩艺,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宪萄。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖榨惰,靈堂內(nèi)的尸體忽然破棺而出拜英,到底是詐尸還是另有隱情,我是刑警寧澤琅催,帶...
    沈念sama閱讀 33,783評(píng)論 4 324
  • 正文 年R本政府宣布居凶,位于F島的核電站,受9級(jí)特大地震影響藤抡,放射性物質(zhì)發(fā)生泄漏侠碧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3 307
  • 文/蒙蒙 一缠黍、第九天 我趴在偏房一處隱蔽的房頂上張望弄兜。 院中可真熱鬧,春花似錦瓷式、人聲如沸替饿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)视卢。三九已至,卻和暖如春廊驼,著一層夾襖步出監(jiān)牢的瞬間据过,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工妒挎, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留绳锅,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2 355
  • 正文 我出身青樓饥漫,卻偏偏與公主長(zhǎng)得像榨呆,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

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