在学习的过程中做了一个倒计时功能,用到的主要知识点有new Date()函数和setInterval定时器功能,在这里记录一下
1 <html> 2 <head> 3 <style> 4 h1 { 5 text-align: center; 6 } 7 </style> 8 </head> 9 10 <body> 11 <h1>距离2019双十一还剩<span id="d"></span>天<span id="h"></span>时<span id="m"></span>分<span id="s"></span>秒</h1> 12 <script> 13 //xx天xx时xx分xx秒 14 var endTime = new Date('2019/11/11'); //结束日期 15 //setInterval clearInterval 这些是window提供的方法 16 //setTimeout clearTimeout 17 var d = document.getElementById('d') 18 var h = document.getElementById('h') 19 var m = document.getElementById('m') 20 var s = document.getElementById('s') 21 setInterval(() => { 22 var now = new Date(); // 现在 23 //转换成秒计算 getTime() 24 var diff = endTime.getTime() - now.getTime(); //从1970年1月1日到现在的毫秒 25 diff = parseInt(diff / 1000) //换成秒数 26 var days = parseInt(diff / (24 * 3600)) //天数 27 var hours = parseInt(diff % (24 * 3600) / 3600);//小时 多少天数剩下的 28 var minites = parseInt(diff % 3600 / 60) //分 多少小时剩下的 29 var seconds = diff % 60; //多少分钟剩下的 30 var str = '距离2019双十一还剩' + days + '天' + hours + '天' + minites + '分' + seconds + '秒' 31 d.innerHTML = days 32 h.innerHTML = hours 33 m.innerHTML = minites 34 s.innerHTML = seconds 35 }, 1000); //每隔一秒执行函数中的代码 36 51 </script> 52 </body> 53 54 </html>