各位大佬，为什么不这样设计呢？
[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;
}
#countdown {
font-size: 5em;
text-shadow: 2px 2px 4px #000000;
}
#controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
input, button {
margin: 5px;
padding: 10px;
font-size: 1em;
}
audio {
display: block;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="countdown">00:00:00</div>
<div id="controls">
<input type="time" id="offTime" value="18:00">
<button onclick="setCountdown()">设置下班时间</button>
<br>
<input type="file" id="localMusic" accept="audio/*">
<input type="text" id="musicUrl" placeholder="或输入网络音乐URL">
<button onclick="loadMusic()">加载音乐</button>
<br>
<input type="file" id="backgroundImage" accept="image/*">
<button onclick="setBackground()">选择背景图</button>
</div>
<audio id="backgroundMusic" controls></audio>
<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 = "下班时间已到！";
}
};
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('请选择一张图片作为背景');
}
}
</script>
</body>
</html> | 
发表于 2024-12-18 17:26
|
发表于 2024-12-18 18:04
感谢大佬指正