原生JS实现简单闹钟程序资源-CSDN文库

共2个文件

html：2个

需积分: 5 68 浏览量 2023-02-01 19:49:45 上传评论收藏 2KB ZIP 举报

在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的闹钟程序，让电脑成为您的贴心睡眠伴侣。这个闹钟程序允许用户设置特定的闹钟时间，并在指定时间到达时发出提醒，确保您不会错过任何重要的时刻。我们需要创建HTML页面作为用户界面。HTML5提供了丰富的元素和API，使得构建这样的应用变得更加便捷。我们可以使用`<input>`元素创建时间选择器，让用户选择小时和分钟，如： ```html <label for="hour">小时:</label> <input type="number" id="hour" min="0" max="23"> <label for="minute">分钟:</label> <input type="number" id="minute" min="0" max="59"> <button id="setAlarm">设置闹钟</button> ``` 接下来，我们用JavaScript来处理用户的输入并设置闹钟。获取用户输入的小时和分钟，然后使用`Date`对象创建一个未来的时间点： ```javascript document.getElementById('setAlarm').addEventListener('click', function() { var hour = document.getElementById('hour').value; var minute = document.getElementById('minute').value; var alarmTime = new Date(); alarmTime.setHours(hour, minute, 0, 0); }); ``` 为了在指定时间触发闹钟，我们需要使用`setTimeout`函数。不过，由于JavaScript的异步特性，我们需要确保时间准确无误，因此可以这样设置： ```javascript var alarmTimeoutId; function setAlarm(alarmTime) { var currentTime = new Date(); var delay = (alarmTime - currentTime) + 1; // 防止小于0导致负数 alarmTimeoutId = setTimeout(function() { alert('闹钟响起!'); // 这里可以添加更复杂的提醒方式，比如播放音频 }, delay); } ``` 为了确保闹钟在页面刷新后仍然有效，我们可以利用`localStorage`存储闹钟时间。当页面加载时，检查是否有保存的闹钟并重新设置： ```javascript window.onload = function() { var savedAlarm = localStorage.getItem('alarmTime'); if (savedAlarm) { var alarmTime = new Date(savedAlarm); setAlarm(alarmTime); } }; function saveAlarm(alarmTime) { localStorage.setItem('alarmTime', alarmTime.toISOString()); } // 调整事件监听器，保存闹钟时间 document.getElementById('setAlarm').addEventListener('click', function() { var hour = document.getElementById('hour').value; var minute = document.getElementById('minute').value; var alarmTime = new Date(); alarmTime.setHours(hour, minute, 0, 0); setAlarm(alarmTime); saveAlarm(alarmTime); }); ``` 我们需要取消闹钟功能。这可以通过清除`setTimeout`的定时器来实现： ```javascript document.getElementById('cancelAlarm').addEventListener('click', function() { clearTimeout(alarmTimeoutId); localStorage.removeItem('alarmTime'); }); ``` 以上就是一个基本的原生JavaScript闹钟程序的实现。通过结合HTML5的表单元素、JavaScript的事件处理、时间和日期操作以及本地存储，我们创建了一个简单但实用的应用，能够帮助用户设置闹钟并在指定时间提醒他们。当然，实际应用可能需要考虑更多细节，比如错误处理、用户交互优化、音频播放等，但这个基础版本已经足够展示其核心功能。

资源推荐

资源详情

资源评论

收起资源包目录

clock.zip （2个子文件）

clock

clock.html 2KB

time.html 4KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .container { width: 300px; height: 100px; margin: 0 auto; background-color: pink; border: 2px solid #808080; display: block; padding: 50px; } .box { display: inline-block; text-align: center; color: cornflowerblue; font-size: 50px; } .time { display: inline-block; width: 100px; margin: 0 auto; text-align: center; color: cornflowerblue; font-size: 30px; margin-top: 10px; } .fl { float: left; } .fr { float: right; } .set { width: 260px; color: gray; margin-top: 80px; } .container input { width: 60px; padding: 4px 8px; background-color: rgba(246, 192, 242, 0.7); outline: none; } .container button { margin-top: 6px; background-color: pink; display: inline-block; } </style> </head> <body> <div class="container"> <div class="box fl"> </div> <div class="time fl"> </div> <div class="clear"></div> <div class="set"> <input type="text" name="hour" id="hour" value="" placeholder="时" /> <input type="text" name="min" id="min" value="" placeholder="分" /> <input type="text" name="sec" id="sec" value="" placeholder="秒" /> <button class="fr" type="button" id="btn">设置</button> <div class="clear"></div> </div> </div> <script type="text/javascript"> //获取元素 var oBox = document.querySelector(".box"); var oTime = document.querySelector(".time"); var oHour = document.getElementById("hour"); var oMin = document.getElementById("min"); var oSec = document.getElementById("sec"); var oBtn = document.getElementById("btn"); var h; var m; var s; //设置定时器 var timer; timer = setInterval(function() { clock(); }, 500) function clock() { var oDate = new Date(); var hour = oDate.getHours(); var minute = oDate.getMinutes(); var second = oDate.getSeconds(); if(hour >= 12) { oTime.innerText = 'pm'; if(hour > 13) { hour = hour - 12; } } else { oTime.innerText = "am"; } //修改时分秒的格式 if(hour < 10) { hour = '0' + hour; } if(minute < 10) { minute = '0' + minute; } if(second < 10) { second = '0' + second; } //修改innertext oBox.innerText = hour + ":" + minute + ":" + second; oBtn.onclick = function() { //获取value值 h = oHour.value; m = oMin.value; s = oSec.value; } if((hour == h) && (minute == m) && (second == s)) { alert("闹钟响了！"); oHour.value = ''; oMin.value = ''; oSec.value = ''; } } clock(); </script> </body> </html>

评论收藏

内容反馈