/**PageBeginHtml Block Begin **/ /***自定义返回顶部小火箭***/ /*生成博客目录的JS 开始*/ /*生成博客目录的JS 结束*/

JS 实现的浏览器系统通知 iNotify.js

注：本分非原创；信息来源 oschina

授权协议:MIT

开发语言:JavaScript

操作系统:跨平台

软件作者:同一种调调

 

iNotify.js 详细介绍

JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。

image

 

下载

  1 $ npm install title-notify --save-dev
  2 $ bower install inotify --save-dev

 

 

编译

  1 # 下载依赖工具
  2 $ npm install
  3 # 压缩inotify
  4 $ npm build

 

 

init

effect: flash | scroll | favicon

 

  1 var iNotify = new iNotify().init()
  2 //推荐下面写法
  3 var iNotify = new iNotify({
  4     message: '有消息了。',//标题
  5     effect: 'flash', // flash | scroll 闪烁还是滚动
  6     openurl:"http://www.bing.com", // 点击弹窗打开连接地址
  7     onclick:function(){ //点击弹出的窗之行事件
  8        console.log("---")
  9     },
 10     //可选播放声音
 11     audio:{
 12         //可以使用数组传多种格式的声音文件
 13         file: ['msg.mp4','msg.mp3','msg.wav']
 14         //下面也是可以的哦
 15         //file: 'msg.mp4'
 16     },
 17     //标题闪烁，或者滚动速度
 18     interval: 1000,
 19     //可选，默认绿底白字的  Favicon
 20     updateFavicon:{
 21         // favicon 字体颜色
 22         textColor: "#fff",
 23         //背景颜色，设置背景颜色透明，将值设置为“transparent”
 24         backgroundColor: "#2F9A00"
 25     },
 26     //可选chrome浏览器通知，默认不填写就是下面的内容
 27     notification:{
 28         title:"通知！",//设置标题
 29         icon:"",//设置图标 icon 默认为 Favicon
 30         body:'您来了一条新消息'//设置消息内容
 31     }
 32 })

 

isPermission

判断浏览器弹框通知是否被阻止。

  1 iNotify.isPermission()

声音设置

player

播放声音

  1 iNotify.player()

loopPlay

自动播放声音

  1 iNotify.loopPlay()

 

stopPlay

停止播放声音

  1 iNotify.stopPlay()

 

setURL

设置播放声音URL

 
  1 iNotify.setURL('msg.mp3')// 设置一个
  2 iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 设置多个

 

title通知

  1 最新的版本默认不播放标题闪烁动画，初始化之后需要调用 setTitle(true) 方法才播放标题动画。

setTitle

设置标题，

  1 iNotify.setTitle(true)//播放动画
  2 iNotify.setTitle('新标题')//闪烁新标题
  3 iNotify.setTitle()//清除闪烁 显示原来的标题

setInterval

设置时间间隔

  1 iNotify.setInterval(2000)

addTimer

添加计数器

  1 iNotify.addTimer()

clearTimer

清除计数器

  1 
  2 iNotify.clearTimer()
  3

favicon通知

setFavicon

设置icon 显示数字

  1 
  2 iNotify.setFavicon(10)
  3

faviconClear

  1 清除数字显示原来的icon
  2 iNotify.faviconClear()
  3

chrome通知

notify

  1 弹出chrome通知，不传参数为预设值...
  2 iNotify.notify();
  3 iNotify.notify({
  4     title:"新通知",
  5     body:"打雷啦，下雨啦...",
  6     openurl:"http://www.bing.com",
  7     onclick:function(){
  8        console.log("---")
  9     }
 10 });
 11

其它

  1 iNotify.init().title; 获取标题

例子

  1 new iNotify({
  2     effect: 'flash',
  3     interval: 500
  4 })
  5 
  6 上面的例子跟下面的是一样的
  7 new iNotify().init({
  8     effect: 'flash',
  9     interval: 500
 10 });
 11

实例一

  1 function iconNotify(num){
  2     if(!notify) {
  3         var notify = new iNotify().init({
  4             effect: 'flash',
  5             interval: 500
  6         });
  7     }
  8     if(num===0){
  9         notify.faviconClear()
 10         notify.setTitle();
 11     }else if(num<100){
 12         notify.setFavicon(num)
 13         notify.setTitle("有新消息！");
 14     }else if(num>99){
 15         notify.setFavicon('..')
 16         notify.setTitle("有新消息！");
 17     }
 18 }

实例二

  1 var notify = new iNotify().init({
  2     effect: 'flash',
  3     interval: 500
  4 });
  5 notify.setFavicon("1")

实例三

  1 var iN = new iNotify().init({
  2     effect: 'flash',
  3     interval: 500,
  4     message:"有消息拉！",
  5     updateFavicon:{//可选，默认绿底白字
  6         textColor: "#fff",// favicon 字体颜色
  7         backgroundColor: "#2F9A00" //背景颜色
  8     }
  9 }).setFavicon(10);

实例四

  1 var iN = new iNotify().init().setFavicon(5);

实例五

  1 var iN = new iNotify().init({
  2     effect: 'flash',
  3     interval: 500,
  4     message:"有消息拉！",
  5     audio:{
  6         file: 'msg.mp4'
  7     }
  8 }).setFavicon(10).player();

实例五

  1 var iN = new iNotify().init({
  2     effect: 'flash',
  3     interval: 500,
  4     message:"有消息拉！",
  5     audio:{
  6         file: 'msg.mp4'//可以使用数组传多种格式的声音文件
  7     },
  8     notification:{
  9         title:"通知！",
 10         icon:"",
 11         body:'您来了一条新消息'
 12     }
 13 }).setFavicon(10).player();
 14 
 15 //弹出chrome通知，不传参数为预设值...
 16 iN.notify();
 17 
 18 iN.notify({
 19     title:"新通知",
 20     body:"打雷啦，下雨啦..."
 21 });

实例六

  1 var iN =  new iNotify({
  2     effect: 'flash',
  3     interval: 500,
  4     message:"有消息拉！",
  5     audio:{
  6         file: ['msg.mp4','msg.mp3','msg.wav']
  7     },
  8     notification:{
  9         title:"通知！",
 10         body:'您来了一条新消息'
 11     }
 12 })
 13 
 14 
 15 iN.setFavicon(10).player();
 16 
 17 var n = new iNotify()
 18 n.init({
 19     effect: 'flash',
 20     interval: 500,
 21     message:"有消息拉！",
 22     audio:{
 23         file: ['openSub.mp4','openSub.mp3','openSub.wav']
 24     },
 25     notification:{
 26         title:"通知！",
 27         icon:"",
 28         body:'您来了一个客户'
 29     }
 30 })
 31 
 32 n.setFavicon(10).player();

       jaywcjlove/iNotify                                                                                                                                                                                                Star 334 | Fork 101                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

JS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖。https://github.com/jaywcjlove/iNotify

最近提交:

  • 40af7d0f2 released v1.0.13                                                                                                                                                                                                            jaywcjlove 2017-03-05 02:55

  • eb5101c97 美化代码 (6)                                                                                                                                                                                                                    Binbin Ma 2017-03-04 23:10

  • 0bbfc4e74 update README.md                                                                                                                                                                                                     jaywcjlove 2016-11-14 17:29

master分支 代码最近更新：2017-03-05                                                                                                                                                                                                  下载

 

 

 

posted @ 2017-08-28 09:18  一品堂.技术学习笔记  阅读(2619)  评论(0)  编辑  收藏  举报