js脚本怎么制作定时提醒功能_js定时器与提醒脚本编写方法-js教程-PHP中文网

js脚本怎么制作定时提醒功能_js定时器与提醒脚本编写方法

看不見的法師

发布： 2025-11-05 14:11:02

原创

785人浏览过

JavaScript通过setTimeout和setInterval结合Notification API实现定时提醒，需先请求用户授权通知权限，再设置定时触发系统通知，如每小时提醒久坐休息，实际应用中需处理权限、兼容性及页面休眠影响，并可借助localStorage保存设置以提升体验。

js脚本怎么制作定时提醒功能_js定时器与提醒脚本编写方法

JavaScript 中实现定时提醒功能，主要依赖浏览器提供的定时器 API：setTimeout 和 setInterval。结合系统通知（Notification API），可以制作出实用的定时提醒脚本。下面详细介绍实现方法。

1. 基础定时器：setTimeout 与 setInterval

JavaScript 提供两种核心定时器函数：

setTimeout：延迟执行一次代码
setInterval：每隔固定时间重复执行代码

例如，5秒后提醒一次：

setTimeout(() => {
  console.log("该喝水了！");
}, 5000); // 5000毫秒 = 5秒

登录后复制

每10分钟提醒一次：

setInterval(() => {
  console.log("记得休息一下！");
}, 600000); // 10分钟 = 600000毫秒

登录后复制

2. 浏览器通知提醒：使用 Notification API

要在页面外弹出系统级提醒，需使用 Notification API。首先检查用户是否授权通知权限：

if (Notification.permission === "granted") {
  new Notification("提醒：该保存工作了！");
} else if (Notification.permission !== "denied") {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      new Notification("提醒已开启");
    }
  });
}

登录后复制

将通知与定时器结合，即可实现自动提醒：

一览AI编剧

创意生成+情节生成+脚本生成，AI编剧3步走，AI自动帮你搞定剧情！

查看详情

setTimeout(() => {
  if (Notification.permission === "granted") {
    new Notification("任务完成提醒", {
      body: "别忘了提交报告！",
      icon: "icon.png"
    });
  }
}, 30000); // 30秒后提醒

登录后复制

3. 实用提醒脚本示例

以下是一个完整的定时提醒脚本，每小时提醒一次：

// 请求通知权限
Notification.requestPermission();

function startHourlyReminder() {
  setInterval(() => {
    if (Notification.permission === "granted") {
      new Notification("久坐提醒", {
        body: "已经一小时了，起来活动一下吧！",
        icon: "/images/reminder-icon.png"
      });
    }
  }, 3600000); // 每小时执行一次
}

startHourlyReminder();

登录后复制