简单的 JavaScript 闹钟的实现

最新推荐文章于 2024-01-31 16:02:42 发布

梦想是坚持

最新推荐文章于 2024-01-31 16:02:42 发布

阅读量743

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/wanghongpu9305/article/details/130521130

版权

可以让用户设置闹钟时间，并在闹钟时间到达时弹出提示框：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 闹钟</title>
</head>
<body>
  <div>
    <label for="alarm-time">闹钟时间：</label>
    <input type="time" id="alarm-time" name="alarm-time">
    <button onclick="setAlarm()">设置闹钟</button>
  </div>
  <script>
    function setAlarm() {
      // 获取闹钟时间
      const alarmTime = document.getElementById("alarm-time").value;
      if (!alarmTime) {
        alert("请选择闹钟时间！");
        return;
      }

      // 计算闹钟时间距离当前时间的毫秒数
      const now = new Date();
      const [hour, minute] = alarmTime.split(":");
      const alarm = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hour, minute);
      const timeDiff = alarm - now;

      // 设置闹钟
      if (timeDiff > 0) {
        setTimeout(() => alert("时间到了！"), timeDiff);
        alert("闹钟设置成功！");
      } else {
        alert("请选择未来的时间！");
      }
    }
  </script>
</body>
</html>

该实现中，通过 document.getElementById() 方法获取闹钟时间输入框的值，然后使用 new Date() 创建当前时间对象和用户选择的闹钟时间对象，并计算两个时间之间的毫秒数差。最后，通过 setTimeout() 方法设置一个定时器，在闹钟时间到达时弹出提示框。

需要注意的是，由于定时器的精度和浏览器的性能等因素的影响，实际上闹钟时间可能会比预期的时间略有偏差。此外，由于 JavaScript 是运行在浏览器中的，因此如果用户关闭了浏览器标签页或者电脑进入了睡眠模式，定时器可能会失效，导致闹钟无法响起。

梦想是坚持

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单的 JavaScript 闹钟的实现

需要注意的是，由于定时器的精度和浏览器的性能等因素的影响，实际上闹钟时间可能会比预期的时间略有偏差。此外，由于 JavaScript 是运行在浏览器中的，因此如果用户关闭了浏览器标签页或者电脑进入了睡眠模式，定时器可能会失效，导致闹钟无法响起。创建当前时间对象和用户选择的闹钟时间对象，并计算两个时间之间的毫秒数差。最后，通过 setTimeout()方法获取闹钟时间输入框的值，然后使用 new Date()方法设置一个定时器，在闹钟时间到达时弹出提示框。
复制链接

扫一扫