倒计时效果---原生JavaScript 手作

前端入坑纪 01

April Day 新更， 工作中遇到倒计时效果，平时都是捣腾个别人的插件就完事了。发现这样的拿来主义对自己水平的增长极为有限。所以兴起了从此只要有时间空余就亲自动手用原生撸一遍，撸完再写个简书，总结巩固下。这样既可以加深自我的印象，也可以方便大家。

so 开始吧~
先上项目链接，不然都是耍流氓！

html结构

<div id="lastime" data-endTime="2018/05/01/12/00"><b></b>天<b></b>时<b></b>分<b></b>秒</div>

这里自定义个data-endTime属性放上截止日期

关于日期格式，只要最终自己用JavaScript能转换成好用的时间戳，再化成总秒数就行。

关键JavaScript代码

        var oTime = document.getElementById('lastime');//获取div
        var endTime = oTime.getAttribute('data-endTime');//获取div上倒计时日期
        var timeArry = endTime.split("/");//倒计时日期转化成数组
        var endTimeStr = new Date(timeArry[0], parseInt(timeArry[1]) - 1, timeArry[2], timeArry[3], timeArry[4]).toString();//生成可识别时间戳
        var timemils = Date.parse(endTimeStr);//这里是获得的总毫秒数
        var bs = oTime.getElementsByTagName("b");//获取div里面的b标签
        var days = hours = minutes = seconds = 0;

        function showTime() {
        // 判定倒计时大于0，否则直接输出00
         var minusTime = timemils - Date.now();//距离现在时间的毫秒差值
         if(minusTime > 0){
           
            days = parseInt(minusTime / 1000 / 60 / 60 / 24);//转化天数
            hours = parseInt(minusTime / 1000 / 60 / 60 % 24);//转化减去天数后剩下的小时数，所以是%取余
            minutes = parseInt(minusTime / 1000 / 60 % 60);
            seconds = parseInt(minusTime / 1000 % 60);
            //用三元表达式判断小于10时，前面加个0，这样输出时就都是两位数而不会显得太突兀
            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)//每隔一秒计算一遍

parseInt(timeArry[1]) - 1 由于月份是从0开始算，所以要减一

好了，就是这样！！！Ps:My skill's not better enough! 如有错漏，还请不吝赐教