讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > H5教程 >

正文

0

0

使用HTML5 Notication API实现一个定时提醒工具

php中文网

php中文网

发布时间：2016-05-17 09:08:39

|

1748人浏览过

|

来源于php中文网

原创

       在本文中将利用封装过的API实现一个定时提醒工具。

       工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。

       主要功能有：用户可以设置周期性的提醒时间，比如设置每1小时提醒一次，1小时后将弹出通知框提醒用户时间到。

       其他包括：用户能够设置对话框的持续时间，比如持续15秒，15秒后对话框消失，以及提醒内容等。


      HTML&CSS

      首先先创建基本的HTML结构如下：



  3.        
  4.                
  5.                 时间提醒
  6.                
  7.                         div {
  8.                                 margin:40px 15px;
  9.                         }
  10.                        
  11.                         #main {                               
  12.                                 margin:0 auto;
  13.                                 width:360px;
  14.                                 border: 2px solid green;
  15.                         }
  16.                        
  17.                         .operation {
  18.                                 text-align:center;
  19.                         }
  20.                        
  21.                
  22.        
  23.        
  24.                

  25.                

  26.                

  27.                

  28.                

  29.                        
  30.                        
  31.                

  •                

  •                
  •                
  •        
    • 复制代码

          desktopNotify.js是前面提到的封装过的Notification API， desktop-notification.js则是相关的业务逻辑JS，后面会说到。基本的效果如下，虽然是丑陋了点- -！！

    0000.png


          程序的逻辑比较简单，设置各个字段，点击"开始"按钮，程序开始计时，到指定时间，弹出通知框。

          JavaScrip

          desktopNotify.js的功能主要是对原生Notification API做一些基本封装，代码如下：

    1. //desktopNotify.js
    2. void function() {
    3.         var _instance = null,
    4.                 _permissionStatus = -1,
    5.                 _eventTable = {
    6.                         "show": 1,
    7.                         "error": 1,
    8.                         "close": 1,
    9.                         "click": 1
    10.                 };
    11.        
    12.        
    13.         /**
    14.          *调用例子：
    15.          * var DN = window.XX.DesktopNotify;
    16.          * DN.requestPermission(function(){
    17.          *           DN.show("http://xxx", "hello", "world");
    18.          * });
    19.          */       
    20.         var DesktopNotify = {
    21.                
    22.                 /**
    23.                  *检测是否支持Notification，支持返回true
    24.                  */
    25.                 isSupport : function() {
    26.                         return 'Notification' in window || 'webkitNotifications' in window;
    27.                 },

    29.                 /**
    30.                  *弹出一个文本桌面通知
    31.                  *
    32.                  * @param {String} iconURL:图标资源
    33.                  * @param {String} title: 标题
    34.                  * @param {String} content: 内容
    35.                  */
    36.                 show : function(iconURL, title, content) {
    37.                         _instance = this.create(iconURL, title, content);
    38.                         _instance.show();
    39.                 },

    41.                
    42.                 /**
    43.                  *弹出一个 HTML桌面通知
    44.                  *
    45.                  * @param {String} url:html链接资源
    46.                  */
    47.                 showHTML : function(url) {
    48.                         _instance = this.createHTML(url);
    49.                         _instance.show();
    50.                 },

    52.                 /***
    53.                  * 关闭一个桌面通知
    54.                  *
    55.                  * @param {Object} cb： 隐藏后的回调函数
    56.                  *
    57.                  */
    58.                 hide : function(cb) {
    59.                         _instance && _instance.close();
    60.                         cb && cb();
    61.                 },
    62.                
    63.                 /**
    64.                  * 释放通知对话框引用
    65.                  */
    66.                 destroy: function() {
    67.                         _instance = null,
    68.                         _permissionStatus = -1;
    69.                 },

    71.                 /**
    72.                  * 检查权限状态
    73.                  * @return {Number}: 0为允许，1为不允许， 2为禁止
    74.                  */
    75.                 checkPermission : function() {
    76.                         return _permissionStatus = webkitNotifications.checkPermission();
    77.                 },
    78.                
    79.                 /**
    80.                  * 检查是否得到授权
    81.                  * @return {Boolean}： true表示得到授权
    82.                  */
    83.                 isPermitted: function() {
    84.                         return this.checkPermission() === 0;
    85.                 },
    86.                
    87.                
    88.                 /**
    89.                  * 请求授权
    90.                  * @param {Object} cb：得到授权后的回调函数
    91.                  */
    92.                 requestPermission: function(cb) {
    93.                         if(this.isPermitted()) {
    94.                                 cb && cb();
    95.                         } else {
    96.                                 webkitNotifications.requestPermission(cb);
    97.                         }
    98.                 },
    99.                
    100.                 /**
    101.                  * 创建一个文本性质的通知对话框，但不展示
    102.                  * @param {Object} iconURL
    103.                  * @param {Object} title
    104.                  * @param {Object} content
    105.                  * @return {Object} Notification实例
    106.                  */
    107.                 create: function(iconURL, title, content) {
    108.                         return webkitNotifications.createNotification(iconURL, title, content);
    109.                 },
    110.                
    111.                 /**
    112.                  * 创建一个HTML性质的通知对话框，但不展示
    113.                  * @param {Object} url: 指向html页面的链接
    114.                  * @return {Object} Notification实例
    115.                  */
    116.                 createHTML: function(url) {
    117.                         return webkitNotifications.createHTMLNotification(url);
    118.                 },
    119.                
    120.                 /**
    121.                  * 添加事件监听函数
    122.                  * @param {Object} type: 事件类型
    123.                  * @param {Object} fn: 监听函数
    124.                  */
    125.                 on: function(type, fn) {
    126.                         _eventTable[type] && _instance && _instance.addEventListener(type, fn, false);
    127.                 },
    128.                
    129.                 /**
    130.                  * 移除事件监听函数
    131.                  * @param {Object} type: 事件类型
    132.                  * @param {Object} fn: 监听函数
    133.                  */
    134.                 un: function(type, fn) {
    135.                                 _eventTable[type] && _instance && _instance.removeEventListener(type, fn, false);
    136.                 }
    137.         };

    139.         window.XX || (window.XX = {});
    140.         window.XX.DesktopNotify = DesktopNotify;
    141. }();
    复制代码

          desktop-notification.js则是业务代码，如下：

    1. //desktop-notification.js
    2. void function() {
    3.     var TITLE = '时间到啦~~！亲！！',
    4.             //图标路径
    5.         ICONURL = 'icon.png';

    7.     var DN = window.XX.DesktopNotify;

    9.    /**
    10.     * 通知函数，根据设置的时间间隔，周期的弹出通知框
    11.     */
    12.     function notify(content, duration) {
    13.         DN.show(ICONURL, TITLE, content);
    14.         setTimeout(function() {
    15.             DN.hide();
    16.         }, duration);
    17.     }

    19.     if (!DN.isSupport()) {
    20.         alert('浏览器不支持桌面通知！');
    21.         return;
    22.     }

    24.     var startEl = document.getElementById('start'),//开始按钮
    25.         stopEl = document.getElementById('stop'),//停止按钮
    26.         intervalEl = document.getElementById('interval'),//提醒时间间隔输入框
    27.         contentEl = document.getElementById('content'),//提醒内容输入框
    28.         durEl = document.getElementById('duration'),//通知框持续时间输入框
    29.         timer = null;

    31.     startEl.addEventListener('click', function(evt) {
    32.         /**
    33.          * 点击“开始”，先申请用户授权，经过授权后，获取相关的提醒时间间隔，以及内容，周期的调用notify函数弹出通知框
    34.          */
    35.         DN.requestPermission(function() {
    36.             timer = setInterval(notify, intervalEl.value * 60 * 1000, contentEl.value, durEl.value * 60 * 1000);
    37.             startEl.disabled = true;
    38.         });
    39.     }, false);

    41.     stopEl.addEventListener('click', function(evt) {
    42.         /**
    43.          * 点击“停止”，清除周期调用
    44.          */
    45.         clearInterval(timer);
    46.         startEl.disabled = false;
    47.     }, false);
    48. }();
    复制代码

          运行效果

          注意，网页必须在HTTP或HTTPS协议下打开，而不能直接用File协议打开，否则无法运行（若用户设置了浏览器接收任何通知，倒是可以直接打开运行）。运行的效果如下：

    000.png


          即便当浏览器最小化，或者未在高亮状态，通知框一样会定时弹出。

          总结

          在本文中，利用了HTML5 Notification做了一个简单的小工具，用于提醒自己不要久坐，按时休息= =！虽然界面是丑陋了点，不过效果还可以。


    完整代码点击：https://github.com/Exodia/jsdemo/tree/master/desktop-notifications


    相关文章

    H5 前端开发和小程序开发有什么区别

    H5页面制作可以自学吗

    H5页面制作的流程是怎样的

    H5页面制作的教程

    H5和JS的学习成本高吗？
    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

    下载

    本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

    上一篇：CSS 与 HTML5 响应式图片 下一篇：HTML5画布下js的文字云/标签云效果-D3 Cloud

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    AI 编程开发AI 聊天问答
    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    AI 编程开发AI大模型
    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    AI 编程开发Agent智能体
    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文档处理AI 聊天问答
    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

    AI 编程开发AI 文本写作
    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    AI 文本写作中文写作
    即梦AI
    即梦AI

    一站式AI创作平台，免费AI图片和视频生成。

    图片拼接图画生成
    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    AI 编程开发AI 文本写作
    智谱清言 - 免费全能的AI助手
    智谱清言 - 免费全能的AI助手

    智谱清言 - 免费全能的AI助手

    AI 编程开发Agent智能体

    相关专题

    更多
    拼多多赚钱的5种方法 拼多多赚钱的5种方法
    拼多多赚钱的5种方法 拼多多赚钱的5种方法

    在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变，以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销，利用平台社交电商红利实现盈利。

    28

    2026.01.26

    edge浏览器怎样设置主页 edge浏览器自定义设置教程
    edge浏览器怎样设置主页 edge浏览器自定义设置教程

    在Edge浏览器中设置主页，请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”，点击“添加新页面”并输入网址。若要使用主页按钮，需在“外观”设置中开启“显示主页按钮”并设定网址。

    8

    2026.01.26

    苹果官方查询网站 苹果手机正品激活查询入口
    苹果官方查询网站 苹果手机正品激活查询入口

    苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行，可用于查询序列号（SN）对应的保修状态、激活日期及技术支持服务。此外，查找丢失设备请使用 iCloud.com/find，购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

    31

    2026.01.26

    npd人格什么意思 npd人格有什么特征
    npd人格什么意思 npd人格有什么特征

    NPD（Narcissistic Personality Disorder）即自恋型人格障碍，是一种心理健康问题，特点是极度夸大自我重要性、需要过度赞美与关注，同时极度缺乏共情能力，背后常掩藏着低自尊和不安全感，影响人际关系、工作和生活，通常在青少年时期开始显现，需由专业人士诊断。

    3

    2026.01.26

    windows安全中心怎么关闭 windows安全中心怎么执行操作
    windows安全中心怎么关闭 windows安全中心怎么执行操作

    关闭Windows安全中心（Windows Defender）可通过系统设置暂时关闭，或使用组策略/注册表永久关闭。最简单的方法是：进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置，将实时保护等选项关闭。

    5

    2026.01.26

    2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】
    2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】

    铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务，并强调官方渠道唯一性与信息安全。

    35

    2026.01.26

    个人所得税税率表2026 个人所得税率最新税率表
    个人所得税税率表2026 个人所得税率最新税率表

    以工资薪金所得为例，应纳税额 = 应纳税所得额 × 税率 - 速算扣除数。应纳税所得额 = 月度收入 - 5000 元 - 专项扣除 - 专项附加扣除 - 依法确定的其他扣除。假设某员工月工资 10000 元，专项扣除 1000 元，专项附加扣除 2000 元，当月应纳税所得额为 10000 - 5000 - 1000 - 2000 = 2000 元，对应税率为 3%，速算扣除数为 0，则当月应纳税额为 2000×3% = 60 元。

    12

    2026.01.26

    oppo云服务官网登录入口 oppo云服务登录手机版
    oppo云服务官网登录入口 oppo云服务登录手机版

    oppo云服务https://cloud.oppo.com/可以在云端安全存储您的照片、视频、联系人、便签等重要数据。当您的手机数据意外丢失或者需要更换手机时，可以随时将这些存储在云端的数据快速恢复到手机中。

    40

    2026.01.26

    抖币充值官方网站 抖币性价比充值链接地址
    抖币充值官方网站 抖币性价比充值链接地址

    网页端充值步骤：打开浏览器，输入https://www.douyin.com，登录账号；点击右上角头像，选择“钱包”；进入“充值中心”，操作和APP端一致。注意：切勿通过第三方链接、二维码充值，谨防受骗

    7

    2026.01.26

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    相关下载

    更多
    TeemIp - IPAM and DDI solution

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    最新Python教程 从入门到精通
    最新Python教程 从入门到精通

    共4课时 | 22.3万人学习

    Node.js 教程
    Node.js 教程

    共57课时 | 9.4万人学习

    CSS3 教程
    CSS3 教程

    共18课时 | 4.9万人学习

    最新文章

    更多
    H5页面如何实现全屏滚动效果 全屏滚动H5实现方法大全
    H5页面如何实现动态内容加载效果 3种动态加载技术让你的H5页面活起来
    H5页面制作中如何提升页面安全性 H5安全防护的10个必备措施
    H5页面如何实现背景音乐循环播放 背景音乐无缝循环播放技术
    H5页面制作中如何设计高点击率按钮 提升按钮点击率的7个技巧
    H5页面如何实现自动轮播图效果 轮播图自动切换实现方案
    H5页面如何实现跨平台适配方案 一套代码适配多端的关键方法解析
    H5页面制作中如何管理多语言切换 多语言国际化实现完整流程
    H5页面制作中如何适配不同分辨率屏幕 多分辨率适配终极方案
    H5页面制作中如何嵌入地图定位服务 主流地图API接入方法详解
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部