前端入坑紀(jì) 01

April Day 新更， 工作中遇到倒計(jì)時(shí)效果，平時(shí)都是搗騰個(gè)別人的插件就完事了。發(fā)現(xiàn)這樣的拿來(lái)主義對(duì)自己水平的增長(zhǎng)極為有限。所以興起了從此只要有時(shí)間空余就親自動(dòng)手用原生擼一遍，擼完再寫個(gè)簡(jiǎn)書，總結(jié)鞏固下。這樣既可以加深自我的印象，也可以方便大家。

so 開始吧~
先上項(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開始算，所以要減一

好了，就是這樣?。?！Ps:My skill's not better enough! 如有錯(cuò)漏，還請(qǐng)不吝賜教