首页用html制作下班倒计时，可设置字体大小，上下居中显示，文本处可加入背景颜色

用html制作下班倒计时，可设置字体大小，上下居中显示，文本处可加入背景颜色

时间: 2023-10-31 14:05:18 浏览: 79

用于倒计时的网页.html

倒计时的html可以用于考研啥的

以下是一个简单的示例代码，你可以根据自己的需要进行修改和美化。 ```html <!DOCTYPE html> <html> <head> <title>下班倒计时</title> <style> .countdown { font-size: 50px; /*字体大小*/ text-align: center; /*文本水平居中*/ line-height: 200px; /*文本垂直居中*/ background-color: #f2f2f2; /*背景颜色*/ } </style> </head> <body> <div class="countdown"></div> <script> // 设置下班时间，这里以18:00为例 var end = new Date(); end.setHours(18); end.setMinutes(0); end.setSeconds(0); // 每秒更新倒计时 setInterval(function() { var now = new Date(); var secondsLeft = Math.floor((end - now) / 1000); var hours = Math.floor(secondsLeft / 3600); var minutes = Math.floor((secondsLeft - hours * 3600) / 60); var seconds = secondsLeft - hours * 3600 - minutes * 60; var countdown = hours + ":" + padZero(minutes) + ":" + padZero(seconds); document.querySelector(".countdown").innerHTML = countdown; }, 1000); // 补零函数 function padZero(num) { return num < 10 ? "0" + num : num; } </script> </body> </html> ```

阅读全文