利用js实现倒计时功能,下面举个例子:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>春节过年倒计时</title> <style> .box{ width: 1000px; height: 400px; background-color: pink; margin: 5px auto; text-align: center; } span{ font-family: 方正兰亭超细黑简体; font-size: 40px; font-weight: bold; color: #fff; line-height: 400px; } </style> </head> <body> <div class="box"> <span id="span0">距离2019年春节倒计时还有:</span> <span id="s_t">00天</span> <span id="s_h">00时</span> <span id="s_m">00分</span> <span id="s_s">00秒</span> </div> <script> //获取剩余时间 function gettingTime(){ var now = new Date() var end = new Date('2019/02/04 00:00:00')//截止时间 var t = end.getTime() - now.getTime() //剩余时间的格林威治时间 var d = Math.floor(t/1000/60/60/24) var h = Math.floor(t/1000/60/60%24)//计算出小时之后,一天24小时,要对小时取余 var m = Math.floor(t/1000/60%60)//同理,计算出分钟后,一小时60分,要对分钟取余 var s = Math.floor(t/1000%60)//同理 document.getElementById('s_t').innerHTML = d + '天' document.getElementById('s_h').innerHTML = h + '时' document.getElementById('s_m').innerHTML = m + '分' document.getElementById('s_s').innerHTML = s + '秒' } setInterval(gettingTime,1000) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例