原生js实现倒计时--2018

2019-11-19 17:28:12

字体：大中小

来源：转载

供稿：网友

思路：

（1）获取日期对象、现在距离1970年的毫秒数、2018年距离1970年的毫秒数、2018年距离现在的总秒数；

（2）总秒数/86400，整数部分代表天；

（3）余数部分/3600，整数部分代表小时；

（4）余数部分/60，整数部分代表分钟；

效果如下：

代码如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style>  *{   margin: 0;   padding:0;  }  p {   font-size: 95px;   text-align: center;  }  p span {   color: red;  }  p span.time {   color: black  } </style></head><body><p>距离2018年还有</p><p><span></span></p><script> var oSpan = document.getElementsByTagName('span')[0]; function tow(n) {  return n >= 0 && n < 10 ? '0' + n : '' + n; } function getDate() {  var oDate = new Date();//获取现在日期对象  var oldTime = oDate.getTime();//现在距离1970年的毫秒数  var newDate = new Date('2018/1/1 00:00:00');//获取指定日期对象  var newTime = newDate.getTime();//2018年距离1970年的毫秒数  var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数  var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；  second = second % 86400;//余数代表剩下的秒数；  var hour = Math.floor(second / 3600);//整数部分代表小时；  second %= 3600; //余数代表 剩下的秒数；  var minute = Math.floor(second / 60);  second %= 60;  var str = tow(day) + '<span class="time">天</span>'    + tow(hour) + '<span class="time">小时</span>'    + tow(minute) + '<span class="time">分钟</span>'    + tow(second) + '<span class="time">秒</span>';  oSpan.innerHTML = str; } getDate(); setInterval(getDate, 1000);</script></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：Angular实现购物车计算示例代码

下一篇：vue-router：嵌套路由的使用方法