1 <script> 2 // 获取元素 3 var tian = document.querySelector('.tian') 4 var shi = document.querySelector('.shi') 5 var fen = document.querySelector('.fen') 6 var miao = document.querySelector('.miao') 7 8 //春节日期 9 var NewYearTime = +new Date('2021-02-12 00:00:00') 10 11 GetTime() 12 // 自动重复调用函数,间隔一秒 13 setInterval(GetTime, 1000) 14 15 // 获取时间函数 16 function GetTime() { 17 var nowtime = +new Date() //返回自1970年1月1日至今的总毫秒数 18 var times = (NewYearTime - nowtime) / 1000 //得到用户输入的时间-当前时间的毫秒值 / 1000 = 剩余秒总数 19 20 var t = parseInt(times / 60 / 60 / 24) //得到天 21 t = t < 10 ? '0' + t : t 22 tian.innerHTML = t + ' 天' 23 var h = parseInt(times / 60 / 60 % 24) //得到小时 24 h = h < 10 ? '0' + h : h //三元运算,如果小于10,就在十位补0,如果大于10 就正常输出 25 shi.innerHTML = h + ' 小时' 26 var m = parseInt(times / 60 % 60) //取得分钟 27 m = m < 10 ? '0' + m : m 28 fen.innerHTML = m + ' 分钟' 29 var s = parseInt(times % 60) //取得秒 30 s = s < 10 ? '0' + s : s 31 miao.innerHTML = s + ' 秒' 32 } 33 </script>
效果图