当前位置：首页 > JavaScript

js实现闹钟定时

2026-02-02 20:13:39JavaScript

实现基础闹钟功能

使用JavaScript的setTimeout或setInterval配合Date对象实现基本闹钟功能。以下是核心代码示例：

function setAlarm(targetTime, callback) {
  const now = new Date();
  const timeDiff = targetTime - now;

  if (timeDiff > 0) {
    setTimeout(() => {
      callback();
    }, timeDiff);
  } else {
    console.log('设置的时间已过去');
  }
}

// 使用示例
const alarmTime = new Date();
alarmTime.setHours(8, 30, 0); // 设置为早上8:30

setAlarm(alarmTime, () => {
  console.log('闹钟响了！');
  // 可以替换为播放音频或显示通知
});

添加重复提醒功能

对于需要每天重复的闹钟，可以结合setInterval和日期判断：

function setDailyAlarm(hour, minute, callback) {
  const checkAlarm = () => {
    const now = new Date();
    if (now.getHours() === hour && now.getMinutes() === minute) {
      callback();
    }
  };

  setInterval(checkAlarm, 60000); // 每分钟检查一次
  checkAlarm(); // 立即执行一次检查
}

// 使用示例
setDailyAlarm(7, 0, () => {
  console.log('每日闹钟：早上7点');
});

添加声音提醒

使用Web Audio API或HTML5的<audio>元素添加声音效果：

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

  // 添加停止按钮功能
  document.getElementById('stopButton').addEventListener('click', () => {
    audio.pause();
  });
}

浏览器通知集成

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

function showNotification() {
  if (!('Notification' in window)) return;

  if (Notification.permission === 'granted') {
    new Notification('闹钟提醒', { body: '时间到了！' });
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        new Notification('闹钟提醒', { body: '时间到了！' });
      }
    });
  }
}

完整实现示例

结合上述功能的完整闹钟组件：

js实现闹钟定时

class AlarmClock {
  constructor() {
    this.alarms = [];
    this.audio = new Audio('alarm.mp3');
    this.audio.loop = true;
  }

  addAlarm(time, repeatDaily = false) {
    const alarm = {
      time: new Date(time),
      repeatDaily,
      id: Date.now()
    };

    this.alarms.push(alarm);
    this.scheduleAlarm(alarm);
    return alarm.id;
  }

  scheduleAlarm(alarm) {
    const now = new Date();
    let triggerTime = alarm.time.getTime() - now.getTime();

    if (triggerTime < 0) {
      if (alarm.repeatDaily) {
        // 如果已经过时且需要重复，设置为明天的同一时间
        const tomorrow = new Date(alarm.time);
        tomorrow.setDate(tomorrow.getDate() + 1);
        triggerTime = tomorrow.getTime() - now.getTime();
      } else {
        return; // 不重复的过时闹钟
      }
    }

    setTimeout(() => {
      this.triggerAlarm(alarm);
      if (alarm.repeatDaily) {
        this.scheduleAlarm(alarm); // 重新安排每日闹钟
      }
    }, triggerTime);
  }

  triggerAlarm(alarm) {
    this.audio.play();
    showNotification();
    console.log(`闹钟 ${alarm.id} 响了！`);
  }

  removeAlarm(alarmId) {
    this.alarms = this.alarms.filter(a => a.id !== alarmId);
  }
}

// 使用示例
const clock = new AlarmClock();
clock.addAlarm('2023-07-20T08:00:00', true); // 每天8点

界面集成建议

创建HTML表单用于设置闹钟时间
添加开关控制闹钟启用/禁用
实现保存功能到localStorage
添加响应式设计适配移动设备

<div id="alarmApp">
  <input type="time" id="alarmTime">
  <button id="setAlarm">设置闹钟</button>
  <div id="alarmList"></div>
  <button id="stopAlarm" style="display:none;">停止</button>
</div>