刚见一大佬用HTML代码写了个倒计时器，我也凑热闹东拼西凑了一个下班倒计时，大致测试了一下也能跑出来
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>下班倒计时</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url('default_background_image_url_here') no-repeat center center fixed;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
color: white;
transition: background 0.5s ease;
}
#container {
text-align: center;
max-width: 600px;
width: 90%;
padding: 2rem;
background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#countdown {
font-size: 5em;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px #000000;
}
#controls {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.control-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-around;
}
input, button {
padding: 0.5rem 1rem;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
input[type="time"], input[type="file"], input[type="text"] {
width: 100%;
max-width: 300px;
padding: 0.75rem;
background-color: #fff;
color: #000;
border: 1px solid #ccc;
}
button {
background-color: #007BFF;
color: #fff;
&:hover {
background-color: #0056b3;
}
}
audio {
width: 100%;
max-width: 300px;
margin-top: 1rem;
}
[url=home.php?mod=space&uid=945662]@media[/url] (min-width: 600px) {
.control-group {
flex-direction: row;
}
}
</style>
</head>
<body>
<div id="container">
<div id="countdown">00:00:00</div>
<div id="controls">
<!-- 提示音设置 -->
<div class="control-group">
<input type="file" id="alertSound" accept="audio/*">
<input type="text" id="alertSoundUrl" placeholder="或输入提示音URL">
<button>设置提示音</button>
</div>
<!-- 背景图设置 -->
<div class="control-group">
<input type="file" id="backgroundImage" accept="image/*">
<button>选择背景图</button>
</div>
<!-- 时间和音乐设置 -->
<div class="control-group">
<input type="time" id="offTime" value="18:00">
<button>设置下班时间</button>
<input type="file" id="localMusic" accept="audio/*">
<input type="text" id="musicUrl" placeholder="或输入网络音乐URL">
<button>加载音乐</button>
</div>
<audio id="backgroundMusic" controls></audio>
</div>
</div>
<script>
function setCountdown() {
const offTime = document.getElementById('offTime').value;
if (offTime) {
const [hours, minutes] = offTime.split(':').map(Number);
let now = new Date();
let offDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, 0, 0);
if (now >= offDate) {
offDate.setDate(offDate.getDate() + 1); // 如果已经过了下班时间，则设定为明天的同一时间
}
countdownTo(offDate);
}
}
function countdownTo(endDate) {
const countdownElement = document.getElementById('countdown');
const updateCountdown = () => {
const now = new Date().getTime();
const distance = endDate - now;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdownElement.textContent = `${days ? days + "d " : ""}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (distance < 0) {
clearInterval(interval);
countdownElement.textContent = "下班时间已到！";
playAlertSound(); // 在倒计时结束时播放提示音
}
};
updateCountdown(); // 立即更新一次
const interval = setInterval(updateCountdown, 1000);
}
function loadMusic() {
const localMusic = document.getElementById('localMusic').files[0];
const musicUrl = document.getElementById('musicUrl').value;
const backgroundMusic = document.getElementById('backgroundMusic');
if (localMusic) {
const url = URL.createObjectURL(localMusic);
backgroundMusic.src = url;
} else if (musicUrl) {
backgroundMusic.src = musicUrl;
} else {
alert('请先选择本地音乐或输入网络音乐URL');
}
}
function setBackground() {
const backgroundImage = document.getElementById('backgroundImage').files[0];
if (backgroundImage) {
const url = URL.createObjectURL(backgroundImage);
document.body.style.backgroundImage = `url(${url})`;
} else {
alert('请选择一张图片作为背景');
}
}
function setAlertSound() {
const alertSound = document.getElementById('alertSound').files[0];
const alertSoundUrl = document.getElementById('alertSoundUrl').value;
const alertSoundPlayer = document.getElementById('alertSoundPlayer');
if (alertSound) {
const url = URL.createObjectURL(alertSound);
alertSoundPlayer.src = url;
} else if (alertSoundUrl) {
alertSoundPlayer.src = alertSoundUrl;
} else {
alert('请先选择本地提示音或输入提示音URL');
}
}
function playAlertSound() {
const alertSoundPlayer = document.getElementById('alertSoundPlayer');
if (alertSoundPlayer.src) {
alertSoundPlayer.play();
}
}
</script>
</body>
</html>
| 
发表于 2024-12-19 16:30
