1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Document</title> 7 <style> 8 li { 9 list-style: none; 10 float: left; 11 50px; 12 height: 50px; 13 border: 1px solid #eeeeee; 14 text-align: center; 15 color: #ffffff; 16 background-color: darkgray; 17 line-height: 50px; 18 } 19 </style> 20 </head> 21 <body> 22 <ul> 23 <li class="day"></li> 24 <li class="hour"></li> 25 <li class="minutes"></li> 26 <li class="seconds"></li> 27 </ul> 28 <script> 29 var day = document.querySelector('.day') 30 var hour = document.querySelector('.hour') 31 var minutes = document.querySelector('.minutes') 32 var seconds = document.querySelector('.seconds') 33 var userTime = +new Date('2020-9-6 18:00:00') // 用户输入的时间毫秒值 34 fn() 35 setInterval(fn, 1000) 36 function fn() { 37 var newTime = +new Date() // 当前时间毫秒值 38 var shenyuTime = (userTime - newTime) / 1000 39 var d = parseInt(shenyuTime / 60 / 60 / 24) // 计算天数 40 d = d < 10 ? '0' + d : d 41 day.innerHTML = d 42 var h = parseInt((shenyuTime / 60 / 60) % 24) // 计算小时 43 h = h < 10 ? '0' + h : h 44 hour.innerHTML = h 45 var m = parseInt((shenyuTime / 60) % 60) // 计算分数 46 m = m < 10 ? '0' + m : m 47 minutes.innerHTML = m 48 var s = parseInt(shenyuTime % 60) // 计算当前秒数 49 s = s < 10 ? '0' + s : s 50 seconds.innerHTML = s 51 return d + '天' + h + '时' + m + '分' + s + '秒' 52 } 53 </script> 54 </body> 55 </html>