提示：本文最后更新于2025-03-29，如有错误或者已经失效，请评论，留言或者告知在线客服。
该HTML源码实现了一个功能强大、设计精美的整点自动播放时间页面。它通过实时走针和整点自动播报功能，为用户提供更直观的时间信息。简洁现代的设计风格和高可定制性，使其适用于各种场景。
该HTML源码实现了一个整点自动播放时间的功能，包含实时走针、问候语、整点自动播报当前时间等功能。页面设计简洁现代，使用了更现代的居中布局，整个页面内容居中显示，添加了柔和的阴影和圆角，使页面更有层次感。背景色调整为浅灰色，内容区域为纯白色，提升视觉舒适度。
源码功能
- 实时走针：显示当前时间的时钟，秒针实时走动。
- 问候语：根据当前时间显示不同的问候语，如“早上好”、“下午好”等。
- 整点自动播报：在整点时自动播报当前时间。
- 样式调整：支持自定义样式，如背景色、字体大小、颜色等。
源码特色
- 现代设计：采用现代的居中布局，页面内容居中显示，提升用户体验。
- 柔和视觉效果：添加了柔和的阴影和圆角，使页面更有层次感。
- 高可定制性：支持自定义样式，满足不同用户的需求。
源码代码
<!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;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
color: #333;
}
.container {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 90%;
max-width: 500px;
text-align: center;
}
h1 {
font-size: 28px;
margin-bottom: 30px;
color: #2c3e50;
}
.time-display {
font-size: 36px;
font-weight: bold;
margin: 20px 0;
color: #3498db;
}
.audio-info {
margin: 20px 0;
}
.audio-info p {
font-size: 16px;
margin-bottom: 10px;
}
audio {
width: 100%;
border-radius: 5px;
margin-bottom: 20px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 25px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
.hint {
font-size: 14px;
color: #7f8c8d;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>整点自动播放声音</h1>
<div class="time-display">
当前时间: <span id="current-time">加载中...</span>
</div>
<div class="audio-info">
<p>当前音频: <span id="audio-text">加载中...</span></p>
<audio id="audio-player" controls>
您的浏览器不支持音频元素。
</audio>
</div>
<button id="play-button">手动播放</button>
<div class="hint">
提示：首次使用请先点击“手动播放”按钮，以允许后续自动播放功能正常工作。
</div>
</div>
<script>
let userInteracted = false;
// 用户交互事件监听
document.addEventListener('click', function() {
userInteracted = true;
});
// 获取当前时间并更新显示
function updateCurrentTime() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
document.getElementById('current-time').textContent = `${hours}:${minutes}:${seconds}`;
}
// 检查是否是整点
function checkOnTheHour() {
const now = new Date();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
if (minutes === 0 && seconds === 0 && userInteracted) {
fetchTimeDataAndPlayAudio();
}
}
// 获取API数据并播放音频
async function fetchTimeDataAndPlayAudio() {
try {
const response = await fetch('https://api.fenx.top/api/timem');
const data = await response.json();
const audioUrl = data.voice.url;
const audioText = data.voice.text;
document.getElementById('audio-text').textContent = audioText;
const audioPlayer = document.getElementById('audio-player');
audioPlayer.src = audioUrl;
audioPlayer.play();
} catch (error) {
console.error('获取时间数据失败:', error);
}
}
// 初始化
function init() {
// 更新时间显示
updateCurrentTime();
setInterval(updateCurrentTime, 1000);
// 检查是否整点
checkOnTheHour();
setInterval(checkOnTheHour, 1000);
// 手动播放按钮
document.getElementById('play-button').addEventListener('click', fetchTimeDataAndPlayAudio);
}
// 页面加载完成后初始化
window.addEventListener('load', init);
</script>
</body>
</html>该HTML源码实现了一个功能强大、设计精美的整点自动播放时间页面。它通过实时走针和整点自动播报功能，为用户提供更直观的时间信息。简洁现代的设计风格和高可定制性，使其适用于各种场景。
本站声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
名称：渡漳网
网址：https://www.dzcrv.com
邮件：[email protected]
本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
由于网络资源有极快的复制性，付费资源一经购买 ，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。
名称：渡漳网
网址：https://www.dzcrv.com
邮件：[email protected]
本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
由于网络资源有极快的复制性，付费资源一经购买 ，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。
