当前位置：首页 > JavaScript

js实现闹钟

2026-03-01 12:08:33JavaScript

实现基本闹钟功能

使用JavaScript的Date对象和setInterval可以构建基础闹钟功能。以下代码实现了一个简单的闹钟，当到达设定时间时会触发警报：

function setAlarm(alarmTime) {
  const checkAlarm = setInterval(() => {
    const now = new Date();
    if (now.getHours() === alarmTime.getHours() && 
        now.getMinutes() === alarmTime.getMinutes()) {
      clearInterval(checkAlarm);
      alert('闹钟响了！');
    }
  }, 1000);
}

// 使用示例：设置明天上午8点的闹钟
const alarmTime = new Date();
alarmTime.setDate(alarmTime.getDate() + 1);
alarmTime.setHours(8);
alarmTime.setMinutes(0);
alarmTime.setSeconds(0);

setAlarm(alarmTime);

添加声音提示

基础警报可以使用浏览器的AudioContext或HTML5的<audio>元素实现声音播放：

function playAlarmSound() {
  const audio = new Audio('alarm_sound.mp3');
  audio.loop = true;
  audio.play();

  // 添加停止按钮功能
  document.getElementById('stopButton').onclick = () => {
    audio.pause();
    audio.currentTime = 0;
  };
}

可视化界面实现

结合HTML和CSS创建用户友好的闹钟界面：

<div id="alarm-container">
  <input type="time" id="alarm-time">
  <button id="set-alarm">设置闹钟</button>
  <button id="stop-alarm" disabled>停止</button>
</div>

<script>
  document.getElementById('set-alarm').addEventListener('click', () => {
    const timeString = document.getElementById('alarm-time').value;
    const [hours, minutes] = timeString.split(':');

    const alarmTime = new Date();
    alarmTime.setHours(parseInt(hours));
    alarmTime.setMinutes(parseInt(minutes));
    alarmTime.setSeconds(0);

    setAlarm(alarmTime);
  });
</script>

添加本地存储功能

使用localStorage保存闹钟设置，即使页面刷新也不会丢失：

// 保存闹钟
function saveAlarm(alarmTime) {
  localStorage.setItem('alarmTime', alarmTime.getTime());
}

// 加载保存的闹钟
function loadAlarm() {
  const savedTime = localStorage.getItem('alarmTime');
  if (savedTime) {
    return new Date(parseInt(savedTime));
  }
  return null;
}

完整实现示例

以下是一个完整的闹钟实现，包含设置、保存和响铃功能：

class AlarmClock {
  constructor() {
    this.alarmTime = null;
    this.alarmInterval = null;
    this.audio = new Audio('alarm.mp3');

    this.loadAlarm();
  }

  setAlarm(hours, minutes) {
    this.clearAlarm();

    const now = new Date();
    this.alarmTime = new Date();
    this.alarmTime.setHours(hours);
    this.alarmTime.setMinutes(minutes);
    this.alarmTime.setSeconds(0);

    if (this.alarmTime < now) {
      this.alarmTime.setDate(this.alarmTime.getDate() + 1);
    }

    this.saveAlarm();
    this.startAlarmCheck();
  }

  startAlarmCheck() {
    this.alarmInterval = setInterval(() => {
      const now = new Date();
      if (now >= this.alarmTime) {
        this.triggerAlarm();
      }
    }, 1000);
  }

  triggerAlarm() {
    this.audio.loop = true;
    this.audio.play();
    this.clearAlarm();
  }

  stopAlarm() {
    this.audio.pause();
    this.audio.currentTime = 0;
  }

  clearAlarm() {
    if (this.alarmInterval) {
      clearInterval(this.alarmInterval);
      this.alarmInterval = null;
    }
  }

  saveAlarm() {
    if (this.alarmTime) {
      localStorage.setItem('alarmTime', this.alarmTime.getTime());
    }
  }

  loadAlarm() {
    const savedTime = localStorage.getItem('alarmTime');
    if (savedTime) {
      this.alarmTime = new Date(parseInt(savedTime));
      this.startAlarmCheck();
    }
  }
}

浏览器通知支持

现代浏览器支持Notification API，可以在闹钟触发时显示系统通知：

function showNotification() {
  if (!("Notification" in window)) {
    console.log("浏览器不支持通知");
    return;
  }

  if (Notification.permission === "granted") {
    new Notification("闹钟时间到");
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(permission => {
      if (permission === "granted") {
        new Notification("闹钟时间到");
      }
    });
  }
}

这些代码示例展示了如何使用JavaScript实现各种闹钟功能，可以根据需要组合使用或扩展功能。

js实现闹钟