放假倒计时
练习放假倒计时，理解date及定时器的使用。效果如下图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #time{ font-size: 40px; color: red; text-align: center; } </style> </head> <body> <div id="time"></div> <script> window.onload = function () { // 1.获取需要的标签 var time = document.getElementById('time'); // 2. 自定义将来的时间 var nextDate = new Date('2028/07/01 12:00:00'); // 3. 获取现在的时间 var currentDate = new Date(); // 4. 获取时间戳 var currentTime = currentDate.getTime(); var nextTime = nextDate.getTime(); // 5. 剩下的时间戳 var allTime = nextTime - currentTime; // 6. 把毫秒转成秒 var allSecond = parseInt(allTime / 1000); var d, h, m, s ; // 7. 开启定时器 timer = setInterval(function () { allSecond -=1; // 8.转化 d = size(parseInt(allSecond / 3600 / 24)); h = size(parseInt(allSecond / 3600 % 24)); m = size(parseInt(allSecond / 60 % 60)); s = size(parseInt(allSecond % 60)); // 9. 注入 time.innerText = "距离放假还有"+ d +"天"+ h +"小时" + m +"分钟"+ s +"秒"; // 10.倒计时完成清除计时器 if (allSecond <= 0){ clearInterval(timer); } }, 1000); function size(num) { return num >= 10 ? num : '0' + num; } } </script> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通