用js实现倒计时效果

xiaoxiao2021-02-28  8

网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>倒计时</title> </head> <body> <!--显示倒计时的div--> <div id="showTime"></div> <script> //输入一个倒计时开始时间 var isTime = new Date('2018-06-7 00:00:00'); var isMillis = isTime.getTime() - new Date().getTime(); var showTime = document.getElementById('showTime'); if(isMillis > 0) { //计算倒计时的函数 function datetime() { isMillis = isTime.getTime() - new Date().getTime(); var tian = Math.floor(isMillis / 1000 / 60 / 60 / 24); if(tian < 10) { hours = '0' + hours; } var hours = Math.floor((isMillis - tian * 24 * 60 * 60 * 1000) / 1000 / 60 / 60); if(hours < 10) { hours = '0' + hours; } var minutes = Math.floor((isMillis - tian * 24 * 60 * 60 * 1000 - hours * 60 * 60 * 1000) / 1000 / 60); if(minutes < 10) { minutes = '0' + minutes; } var seconds = Math.floor((isMillis - tian * 24 * 60 * 60 * 1000 - hours * 60 * 60 * 1000 - minutes * 60 * 1000) / 1000); if(seconds < 10) { seconds = '0' + seconds; } showTime.innerHTML = tian + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'; } datetime(); } else { document.write('结束时间不正确!') } //每个一秒执行一次,实现倒计时的效果 setInterval(datetime, 1000); </script> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-1750099.html

最新回复(0)