需求:实现距离2019年过年倒计时展示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>倒计时</title> <style type="text/css"> #box { font-size: 60px; margin-top: 200px; text-align: center; color: pink; } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> //定义结束时间 var endDate = new Date('09/10/2018 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 = `❤距离我们认识一周年❤${'<br>'}还有${d}天${h}小时${m}分${s}秒`; //判断倒计时结束 if (seconds <= 0) { clearInterval(runTime); timeHtml = '❤❤❤❤❤'; } document.querySelector('#box').innerHTML = timeHtml; seconds--; } </script> </body> </html>