当前位置:首页 > JavaScript

js实现定时提醒

2026-04-07 08:27:29JavaScript

js实现定时提醒

使用 setTimeout 实现单次提醒

function setReminder(message, delay) {
  setTimeout(() => {
    alert(message);
  }, delay * 1000); // 将秒转换为毫秒
}

// 示例:5秒后提醒
setReminder("该休息了!", 5);

使用 setInterval 实现周期性提醒

let reminderInterval;

function startPeriodicReminder(message, interval) {
  reminderInterval = setInterval(() => {
    alert(message);
  }, interval * 1000);
}

function stopPeriodicReminder() {
  clearInterval(reminderInterval);
}

// 示例:每10秒提醒一次
startPeriodicReminder("喝水时间到!", 10);

// 停止提醒
// stopPeriodicReminder();

使用 Notification API 实现桌面通知

function showNotification(title, options) {
  // 检查浏览器是否支持通知
  if (!("Notification" in window)) {
    alert("该浏览器不支持桌面通知");
    return;
  }

  // 检查是否已授予权限
  if (Notification.permission === "granted") {
    new Notification(title, options);
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(permission => {
      if (permission === "granted") {
        new Notification(title, options);
      }
    });
  }
}

// 示例:显示通知
showNotification("提醒", {
  body: "任务已完成",
  icon: "path/to/icon.png"
});

结合使用定时器和通知

function setSmartReminder(message, delay) {
  setTimeout(() => {
    showNotification("提醒", { body: message });
  }, delay * 1000);
}

// 示例:30秒后发送通知
setSmartReminder("会议即将开始", 30);

添加声音提醒

function playAlertSound() {
  const audio = new Audio('path/to/sound.mp3');
  audio.play();
}

function setReminderWithSound(message, delay) {
  setTimeout(() => {
    alert(message);
    playAlertSound();
  }, delay * 1000);
}

// 示例:带声音的提醒
setReminderWithSound("时间到了!", 60);

标签: js
分享给朋友:

相关文章

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…