![图片[1]|整点报时时间HTML|不死鸟资源网](https://www.dalao.net/upload/attach/202504/5053_1743484756587.webp)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态时间提醒</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
margin: 0;
}
.container {
text-align: center;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 90%;
}
.time {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}
.message {
font-size: 18px;
color: #555;
margin-bottom: 20px;
line-height: 1.5;
}
.audio-player {
margin-top: 20px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin: 5px;
}
button:hover {
background-color: #45a049;
}
.reminder-setup {
margin-top: 30px;
}
input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 5px;
width: 60px;
}
.reminder-message {
color: #e74c3c;
font-weight: bold;
margin-top: 10px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="time" id="current-time">加载中...</div>
<div class="message" id="message">加载中...</div>
<div class="audio-player">
<audio id="audio-player" controls hidden></audio>
<button id="play-button">播放提醒</button>
</div>
<div class="reminder-setup">
<h3>设置到点提醒</h3>
<div>
<input type="number" id="reminder-hour" min="0" max="23" placeholder="时">
<span>:</span>
<input type="number" id="reminder-minute" min="0" max="59" placeholder="分">
<button id="set-reminder">设置提醒</button>
</div>
<div class="reminder-message" id="reminder-status"></div>
</div>
</div>
<script>
// 全局变量
let reminderTime = null;
let reminderInterval = null;
let audioSrc = '';
// 初始化页面
async function initPage() {
try {
const data = await fetchTimeData();
updateUI(data);
startDynamicTime();
setupEventListeners();
} catch (error) {
console.error('初始化失败:', error);
document.getElementById('current-time').textContent = '获取时间失败';
document.getElementById('message').textContent = '请检查网络连接并重试';
}
}
// 获取 API 数据
async function fetchTimeData() {
const response = await fetch('https://api.fenx.top/api/times');
return await response.json();
}
// 更新 UI
function updateUI(data) {
document.getElementById('current-time').textContent = data.current_time;
document.getElementById('message').textContent = data.data.msg;
audioSrc = data.data.mp3;
}
// 启动动态时间
function startDynamicTime() {
setInterval(() => {
const now = new Date();
const formattedTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
document.getElementById('current-time').textContent = formattedTime;
// 检查提醒
checkReminder(formattedTime);
}, 1000);
}
// 设置事件监听器
function setupEventListeners() {
// 播放按钮
document.getElementById('play-button').addEventListener('click', () => {
const audioPlayer = document.getElementById('audio-player');
audioPlayer.src = audioSrc;
audioPlayer.play();
});
// 设置提醒按钮
document.getElementById('set-reminder').addEventListener('click', setReminder);
}
// 设置提醒
function setReminder() {
const hourInput = document.getElementById('reminder-hour');
const minuteInput = document.getElementById('reminder-minute');
const statusMessage = document.getElementById('reminder-status');
// 验证输入
const hour = parseInt(hourInput.value);
const minute = parseInt(minuteInput.value);
if (isNaN(hour) || isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59) {
statusMessage.textContent = '请输入有效的时间 (时: 0-23, 分: 0-59)';
statusMessage.style.color = 'red';
statusMessage.style.display = 'block';
return;
}
// 设置提醒时间
reminderTime = {
hour: hour,
minute: minute
};
// 显示成功消息
statusMessage.textContent = `已设置提醒: ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
statusMessage.style.color = 'green';
statusMessage.style.display = 'block';
}
// 检查提醒
function checkReminder(currentTimeStr) {
if (!reminderTime) return;
const timeParts = currentTimeStr.split(' ')[1].split(':');
const currentHour = parseInt(timeParts[0]);
const currentMinute = parseInt(timeParts[1]);
if (currentHour === reminderTime.hour && currentMinute === reminderTime.minute) {
triggerReminder();
// 清除提醒
reminderTime = null;
// 更新状态
const statusMessage = document.getElementById('reminder-status');
statusMessage.textContent = '提醒已触发！';
statusMessage.style.color = 'blue';
}
}
// 触发提醒
function triggerReminder() {
const audioPlayer = document.getElementById('audio-player');
audioPlayer.src = audioSrc;
audioPlayer.play();
// 显示提醒消息
document.getElementById('message').textContent = '提醒时间到！';
}
// 页面加载时初始化
window.onload = initPage;
</script>
</body>
</html>本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作!
THE END
