前端入坑纪 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! 如有错漏，还请不吝赐教
