需求:实现距离2019年过年倒计时展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时</title> <style> #box { font-size:60px; margin-top:200px; text-align:center; } </style> </head> <body> <div id="box"></div> <script> //定义结束时间 var endDate = new Date('02/05/2019 00:00:00'); //当前的时间 var currDate = new Date(); //倒计时的秒数 var seconds = Math.round(endDate.getTime()/1000) - Math.round(currDate.getTime()/1000); runTime(); //调用一下 //定时 var timer = setInterval(runTime, 1000); function runTime(){ //包含的天数 var d = Math.floor(seconds / (3600 * 24)); var s = seconds - d * 3600 * 24; //计算包含的小时数 var h = Math.floor(s / 3600); s -= h * 3600; //剩下的秒数 //计算包含的分钟数 var m = Math.floor(s / 60); //计算剩下的秒 s -= m * 60; //给个位数 补0 d = d < 10 ? '0'+d : d; h = h < 10 ? '0'+h : h; m = m < 10 ? '0'+m : m; s = s < 10 ? '0'+s : s; //拼接字符串 var timeHtml = `距离过年还有${d}天${h}小时${m}分${s}秒`; //判断倒计时结束 if (seconds <= 0) { clearInterval(timer); timeHtml = '过年了'; } document.querySelector('#box').innerHTML = timeHtml; seconds --; } </script> </body> </html>