前端入坑紀(jì) 01
April Day 新更砌左， 工作中遇到倒計(jì)時(shí)效果脖咐，平時(shí)都是搗騰個(gè)別人的插件就完事了。發(fā)現(xiàn)這樣的拿來(lái)主義對(duì)自己水平的增長(zhǎng)極為有限汇歹。所以興起了從此只要有時(shí)間空余就親自動(dòng)手用原生擼一遍屁擅，擼完再寫(xiě)個(gè)簡(jiǎn)書(shū)，總結(jié)鞏固下产弹。這樣既可以加深自我的印象派歌，也可以方便大家。
so 開(kāi)始吧~
先上項(xiàng)目鏈接痰哨，不然都是耍流氓胶果！
html結(jié)構(gòu)
<div id="lastime" data-endTime="2018/05/01/12/00"><b></b>天<b></b>時(shí)<b></b>分<b></b>秒</div>
這里自定義個(gè)data-endTime屬性放上截止日期
關(guān)于日期格式，只要最終自己用JavaScript能轉(zhuǎn)換成好用的時(shí)間戳斤斧，再化成總秒數(shù)就行早抠。
關(guān)鍵JavaScript代碼
var oTime = document.getElementById('lastime');//獲取div
var endTime = oTime.getAttribute('data-endTime');//獲取div上倒計(jì)時(shí)日期
var timeArry = endTime.split("/");//倒計(jì)時(shí)日期轉(zhuǎn)化成數(shù)組
var endTimeStr = new Date(timeArry[0], parseInt(timeArry[1]) - 1, timeArry[2], timeArry[3], timeArry[4]).toString();//生成可識(shí)別時(shí)間戳
var timemils = Date.parse(endTimeStr);//這里是獲得的總毫秒數(shù)
var bs = oTime.getElementsByTagName("b");//獲取div里面的b標(biāo)簽
var days = hours = minutes = seconds = 0;
function showTime() {
// 判定倒計(jì)時(shí)大于0，否則直接輸出00
var minusTime = timemils - Date.now();//距離現(xiàn)在時(shí)間的毫秒差值
if(minusTime > 0){
days = parseInt(minusTime / 1000 / 60 / 60 / 24);//轉(zhuǎn)化天數(shù)
hours = parseInt(minusTime / 1000 / 60 / 60 % 24);//轉(zhuǎn)化減去天數(shù)后剩下的小時(shí)數(shù)折欠，所以是%取余
minutes = parseInt(minusTime / 1000 / 60 % 60);
seconds = parseInt(minusTime / 1000 % 60);
//用三元表達(dá)式判斷小于10時(shí)贝或，前面加個(gè)0吼过，這樣輸出時(shí)就都是兩位數(shù)而不會(huì)顯得太突兀
bs[0].textContent = days < 10 ? "0" + days : days;
bs[1].textContent = hours < 10 ? "0" + hours : hours;
bs[2].textContent = minutes < 10 ? "0" + minutes : minutes;
bs[3].textContent = seconds < 10 ? "0" + seconds : seconds;
}
else {
bs[0].textContent = bs[1].textContent =
bs[2].textContent = bs[3].textContent = "00";
}
}
setInterval(showTime, 1000)//每隔一秒計(jì)算一遍
parseInt(timeArry[1]) - 1 由于月份是從0開(kāi)始算，所以要減一
好了咪奖，就是這樣５脸馈！羊赵！Ps:My skill's not better enough! 如有錯(cuò)漏趟佃，還請(qǐng)不吝賜教
