写一个web页面,上班时间下班时间计时
时间: 2023-05-15 09:07:37 浏览: 75
好的,这是一个计时器的功能,可以使用 JavaScript 来实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>上班时间下班时间计时器</title>
</head>
<body>
<h1>上班时间下班时间计时器</h1>
<p>当前时间:<span id="time"></span></p>
<p>距离下班还有:<span id="countdown"></span></p>
<script>
// 设置上班时间和下班时间
var startHour = 9;
var endHour = 18;
// 获取当前时间
function getTime() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
return hour + ":" + minute + ":" + second;
}
// 更新时间显示
function updateTime() {
document.getElementById("time").innerHTML = getTime();
}
// 计算距离下班还有多少时间
function getCountdown() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var countdown = 0;
if (hour < startHour) {
countdown = (startHour - hour - 1) * 3600 + (60 - minute - 1) * 60 + (60 - second);
} else if (hour >= endHour) {
countdown = 24 * 3600 - (hour - endHour) * 3600 - minute * 60 - second;
} else {
countdown = (endHour - hour - 1) * 3600 + (60 - minute - 1) * 60 + (60 - second);
}
return countdown;
}
// 更新倒计时显示
function updateCountdown() {
var countdown = getCountdown();
var hour = Math.floor(countdown / 3600);
var minute = Math.floor((countdown - hour * 3600) / 60);
var second = countdown - hour * 3600 - minute * 60;
document.getElementById("countdown").innerHTML = hour + " 小时 " + minute + " 分钟 " + second + " 秒";
}
// 每秒钟更新一次时间和倒计时
setInterval(function() {
updateTime();
updateCountdown();
}, 1000);
</script>
</body>
</html>
```
这个页面会显示当前时间和距离下班还有多少时间,每秒钟自动更新一次。你可以根据需要修改上班时间和下班时间。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)