下面是完整的代码，你可以直接复制到一个 .html 文件中,然后用浏览器打开它。
（图片来源网络，侵删）
最终效果预览
完整代码 (HTML, CSS, JavaScript)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">简单网页闹铃</title>
<style>
/* 基础样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f2f5;
color: #333;
}
/* 闹铃容器 */
.alarm-container {
background-color: #ffffff;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 400px;
text-align: center;
}
h1 {
color: #1a73e8;
margin-top: 0;
}
/* 输入和标签样式 */
.input-group {
margin-bottom: 20px;
text-align: left;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #555;
}
input[type="time"] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
box-sizing: border-box; /* 确保padding不会影响宽度 */
}
input[type="text"] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
box-sizing: border-box;
}
/* 按钮样式 */
.button-group {
display: flex;
gap: 10px;
margin-top: 25px;
}
button {
flex: 1;
padding: 12px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s, transform 0.1s;
}
button:active {
transform: scale(0.98);
}
.set-btn {
background-color: #34a853;
color: white;
}
.set-btn:hover {
background-color: #2d8e47;
}
.stop-btn {
background-color: #ea4335;
color: white;
display: none; /* 默认隐藏 */
}
.stop-btn:hover {
background-color: #d33b27;
}
/* 状态信息 */
.status {
margin-top: 20px;
font-size: 14px;
color: #666;
min-height: 20px; /* 防止布局跳动 */
}
/* 闹钟激活时的动画 */
.alarm-active {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(234, 67, 53, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(234, 67, 53, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(234, 67, 53, 0);
}
}
/* 闹铃提示音的样式 */
.alarm-sound {
display: none;
}
</style>
</head>
<body>
<div class="alarm-container" id="alarmContainer">
<h1>网页闹铃</h1>
<div class="input-group">
<label for="alarmTime">设置闹铃时间:</label>
<input type="time" id="alarmTime" required>
</div>
<div class="input-group">
<label for="alarmLabel">闹铃标签 (可选):</label>
<input type="text" id="alarmLabel" placeholder="起床、开会">
</div>
<div class="button-group">
<button class="set-btn" id="setAlarmBtn">设置闹铃</button>
<button class="stop-btn" id="stopAlarmBtn">停止闹铃</button>
</div>
<div class="status" id="statusMessage"></div>
</div>
<!-- 使用HTML5的audio元素来播放声音 -->
<audio class="alarm-sound" id="alarmSound" loop>
<!-- 这里使用一个简单的在线beep声作为示例 -->
<source src="https://www.soundjay.com/buttons/sounds/button-09.mp3" type="audio/mpeg">
<!-- 如果上面的链接失效，可以换成其他声音文件或使用data URI -->
<!-- <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT" type="audio/wav"> -->
您的浏览器不支持音频元素。
</audio>
<script>
// 获取DOM元素
const alarmTimeInput = document.getElementById('alarmTime');
const alarmLabelInput = document.getElementById('alarmLabel');
const setAlarmBtn = document.getElementById('setAlarmBtn');
const stopAlarmBtn = document.getElementById('stopAlarmBtn');
const statusMessage = document.getElementById('statusMessage');
const alarmContainer = document.getElementById('alarmContainer');
const alarmSound = document.getElementById('alarmSound');
let alarmTimeout; // 用于存储setTimeout的ID，以便取消
// 设置闹铃按钮的点击事件
setAlarmBtn.addEventListener('click', () => {
const time = alarmTimeInput.value;
const label = alarmLabelInput.value || '闹铃';
if (!time) {
statusMessage.textContent = '请先设置闹铃时间！';
statusMessage.style.color = '#ea4335';
return;
}
// 清除之前可能存在的闹铃
if (alarmTimeout) {
clearTimeout(alarmTimeout);
}
// 计算距离闹铃的时间（毫秒）
const now = new Date();
const alarmTime = new Date();
const [hours, minutes] = time.split(':');
alarmTime.setHours(hours, minutes, 0, 0);
// 如果闹铃时间已经过了，设置为明天
if (alarmTime <= now) {
alarmTime.setDate(alarmTime.getDate() + 1);
statusMessage.textContent = `闹铃已设置为明天 ${time} (${label})`;
} else {
statusMessage.textContent = `闹铃已设置为今天 ${time} (${label})`;
}
statusMessage.style.color = '#34a853';
// 计算等待时间
const timeUntilAlarm = alarmTime - now;
// 设置闹铃
alarmTimeout = setTimeout(() => {
triggerAlarm(label);
}, timeUntilAlarm);
});
// 停止闹铃按钮的点击事件
stopAlarmBtn.addEventListener('click', () => {
stopAlarm();
});
// 触发闹铃的函数
function triggerAlarm(label) {
statusMessage.textContent = `⏰ 时间到！${label}`;
statusMessage.style.color = '#ea4335';
statusMessage.style.fontSize = '24px'; /* 放大提示文字 */
statusMessage.style.fontWeight = 'bold';
// 播放声音
alarmSound.play().catch(e => console.error("播放音频失败:", e));
// 添加动画效果
alarmContainer.classList.add('alarm-active');
// 显示停止按钮
stopAlarmBtn.style.display = 'block';
setAlarmBtn.style.display = 'none'; // 隐藏设置按钮
}
// 停止闹铃的函数
function stopAlarm() {
// 停止声音
alarmSound.pause();
alarmSound.currentTime = 0; // 重置音频播放进度
// 移除动画效果
alarmContainer.classList.remove('alarm-active');
// 隐藏停止按钮，显示设置按钮
stopAlarmBtn.style.display = 'none';
setAlarmBtn.style.display = 'block';
// 恢复状态文字
statusMessage.textContent = '闹铃已停止。';
statusMessage.style.color = '#666';
statusMessage.style.fontSize = '14px';
statusMessage.style.fontWeight = 'normal';
// 清除定时器
if (alarmTimeout) {
clearTimeout(alarmTimeout);
alarmTimeout = null;
}
}
</script>
</body>
</html>
代码分步解析
HTML 结构 (<body> 部分)
<div class="alarm-container">: 整个闹铃应用的外部容器,用于布局和样式。<h1>: 页面标题。<input type="time">: 这是HTML5提供的专门用于选择时间的输入框,非常方便。<input type="text">: 用于输入闹铃的标签，如“起床”、“吃药”等,让闹铃更有意义。<button>: 两个按钮，一个用于“设置闹铃”，一个用于“停止闹铃”，停止按钮默认是隐藏的 (display: none;)。<div class="status">: 用于显示当前状态信息，闹铃已设置”或“时间到！”。<audio>: 这是关键部分，我们使用HTML5的<audio>标签来播放声音。class="alarm-sound"和display: none;让它在页面上不可见,但功能可用。id="alarmSound"方便JavaScript控制它。loop属性让声音在触发后循环播放,直到被手动停止。<source>标签指定了声音文件的来源，这里我使用了一个免费的在线beep声作为示例，你可以换成任何你喜欢的.mp3或.wav文件的链接。
CSS 样式 (<style> 部分)
body: 使用Flexbox布局,让闹铃容器在屏幕中央。.alarm-container: 设置了白色背景、圆角、阴影,看起来像一个卡片。input和button: 添加了内边距、边框、圆角等，让它们看起来更现代、更易点击。.button-group: 使用display: flex让两个按钮并排显示，并设置gap让它们之间有空隙。.alarm-active和@keyframes pulse: 当闹铃触发时，会给容器添加一个alarm-active类，这个类会触发一个脉冲动画（box-shadow的缩放效果）,视觉上非常醒目。hover和active: 为按钮添加了鼠标悬停和点击时的效果,提升了交互体验。
JavaScript 逻辑 (<script> 部分)
这是闹铃的核心功能所在。
-
获取元素: 首先获取所有需要用到的HTML元素的引用,方便后续操作。
-
setAlarmBtn.addEventListener('click', ...): 当点击“设置闹铃”时执行：- 获取用户输入的时间和标签。
- 检查时间是否为空,如果为空则提示用户。
- 关键逻辑 - 计算时间差:
- 创建一个
Date对象代表当前时间now。 - 创建另一个
Date对象alarmTime,并将用户设置的小时和分钟赋值给它。 - 重要判断:
alarmTime早于或等于now，说明今天的时间已经过了，那么就把闹铃时间设置为alarmTime.setDate(alarmTime.getDate() + 1),即明天。 - 计算从现在到闹铃时间的总毫秒数
timeUntilAlarm。
- 创建一个
- 设置定时器: 使用
setTimeout()函数，在timeUntilAlarm毫秒后执行一个回调函数triggerAlarm，我们将这个setTimeout的ID存储在alarmTimeout变量中,以便之后可以取消它。 - 更新状态信息,告诉用户闹铃已设置。
-
stopAlarmBtn.addEventListener('click', ...): 当点击“停止闹铃”时执行：
（图片来源网络，侵删）- 调用
stopAlarm()函数。
- 调用
-
triggerAlarm(label)函数: 这是闹铃响时执行的函数。- 更新状态信息为“时间到！”。
- 播放声音:
alarmSound.play()。 - 添加动画:
alarmContainer.classList.add('alarm-active')。 - 显示“停止”按钮，隐藏“设置”按钮。
-
stopAlarm()函数: 用于停止闹铃。- 停止声音:
alarmSound.pause()alarmSound.currentTime = 0(重置到开头)。 - 移除动画:
alarmContainer.classList.remove('alarm-active')。 - 恢复UI：隐藏“停止”按钮，显示“设置”按钮,重置状态文字。
- 清除定时器:
clearTimeout(alarmTimeout)，这是非常重要的，如果不清除，即使闹铃被停止,到了预定时间它还是会响。
- 停止声音:
如何使用和扩展
- 保存: 将以上所有代码复制到一个文本文件中，命名为
alarm.html。 - 打开: 用任何现代浏览器（如 Chrome, Firefox, Edge）打开这个文件。
- 自定义声音: 你可以找到自己喜欢的
.mp3或.wav文件，将其放在和alarm.html相同的目录下，然后将<audio>标签中的src属性改为你的文件名，<source src="my-alarm-sound.mp3" type="audio/mpeg">。 - 扩展功能:
- 多个闹铃: 可以修改代码，使用数组来存储多个闹铃，并在页面上列出它们,允许用户删除或编辑。
- 重复闹铃: 可以增加一个选择框，让用户选择“仅一次”、“每天”、“工作日”等,然后在计算时间时加入逻辑。
- 自定义铃声: 可以增加一个文件上传按钮,让用户上传自己的声音文件作为闹铃。
- 本地存储: 使用
localStorage可以让用户设置的闹铃在刷新页面后依然存在。
（图片来源网络，侵删）
