JS 实现的浏览器系统通知 iNotify.js
注:本分非原创;信息来源 oschina
授权协议:MIT
开发语言:JavaScript
操作系统:跨平台
软件作者:同一种调调
iNotify.js 详细介绍
JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。
下载
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();
JS 实现浏览器的 title 闪烁、滚动、声音提示、通知,没有依赖。https://github.com/jaywcjlove/iNotify
|
相关文章
- 人工智能python3+tensorflow人脸识别_使用 face-api.js 在你的浏览器中做人脸识别(基于 tensorflow.js
- 基于 keras-js 快速实现浏览器内的 CNN 手写数字识别
- js模块化开发
- js/jQuery判断浏览器名称、内核版本、浏览器壳
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
- Arcgis for Js实现graphiclayer的空间查询
- 【Javascript/Vue】如何解决js中超链接跳转到新的页面不被浏览器拦截?(已解决,代码实例,亲测有效)
- JS实现浏览器html中的“复制”操作(兼容大部分浏览器,亲测没问题)
- nginx访问css js 图片等静态资源,报404或无法定向访问到
- 页面正在载入js
- JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
- Javascript模块化工具require.js教程
- 【企鹅电竞直播源】浏览器抓取真实直播源地址(纯前端JS & PHP解析源码)
- 我写的websocket推送例子,每隔5秒服务器向客户端浏览器发送消息(node.js和浏览器)
- js中遍历对象的属性和值
- js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)
- 浅析浏览器和Node.js的EventLoop为什么这么设计?
- 浅析浏览器是如何工作的(一):V8引擎、JIT机制、JS代码解释执行与编译执行
- weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
- JavaScript学习第1天:浏览器组成、JS的组成、变量、数据类型转化、运算符、流程控制、数组、函数
- js Array的push pop shift unshift 方法
- [js]关于官网咨询窗口手动关闭后网站所有页面都不再打开小窗口,关闭浏览器重开后正常显示之 sessionStorage
- jquery.js和jquery.min.js的区别和springboot整合echarts.min.js
- 折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获