Javascript快速实现浏览器系统通知


Posted in Javascript onAugust 26, 2017

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

Javascript快速实现浏览器系统通知

下载

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

编译

# 下载依赖工具
$ npm install 
# 压缩inotify
$ npm build
init
effect: flash | scroll | favicon
var iNotify = new iNotify().init()
//推荐下面写法
var iNotify = new iNotify({
 message: '有消息了。',//标题
 effect: 'flash', // flash | scroll 闪烁还是滚动
 openurl:"http://www.bing.com", // 点击弹窗打开连接地址
 onclick:function(){ //点击弹出的窗之行事件
  console.log("---")
 },
 //可选播放声音
 audio:{
  //可以使用数组传多种格式的声音文件
  file: ['msg.mp4','msg.mp3','msg.wav']
  //下面也是可以的哦
  //file: 'msg.mp4'
 },
 //标题闪烁,或者滚动速度
 interval: 1000,
 //可选,默认绿底白字的 Favicon
 updateFavicon:{
  // favicon 字体颜色
  textColor: "#fff",
  //背景颜色,设置背景颜色透明,将值设置为“transparent”
  backgroundColor: "#2F9A00" 
 },
 //可选chrome浏览器通知,默认不填写就是下面的内容
 notification:{
  title:"通知!",//设置标题
  icon:"",//设置图标 icon 默认为 Favicon
  body:'您来了一条新消息'//设置消息内容
 }
})

isPermission

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

iNotify.isPermission()

声音设置

player

播放声音

iNotify.player()
loopPlay

自动播放声音

iNotify.loopPlay()
stopPlay

停止播放声音

iNotify.stopPlay()
setURL

设置播放声音URL

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

title通知

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

setTitle

设置标题,

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

 设置时间间隔

iNotify.setInterval(2000)
addTimer

添加计数器

iNotify.addTimer()
clearTimer

清除计数器

iNotify.clearTimer()

favicon通知

setFavicon

设置icon 显示数字

iNotify.setFavicon(10)
faviconClear

清除数字显示原来的icon

iNotify.faviconClear()

chrome通知

notify

弹出chrome通知,不传参数为预设值...

iNotify.notify(); 
iNotify.notify({
 title:"新通知",
 body:"打雷啦,下雨啦...",
 openurl:"http://www.bing.com",
 onclick:function(){
  console.log("---")
 }
});

其它

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

例子

new iNotify({
 effect: 'flash',
 interval: 500
})

上面的例子跟下面的是一样的

new iNotify().init({
 effect: 'flash',
 interval: 500
});

实例一

function iconNotify(num){
 if(!notify) {
  var notify = new iNotify().init({
   effect: 'flash',
   interval: 500
  });
 }
 if(num===0){
  notify.faviconClear()
  notify.setTitle();
 }else if(num<100){
  notify.setFavicon(num)
  notify.setTitle("有新消息!");
 }else if(num>99){
  notify.setFavicon('..')
  notify.setTitle("有新消息!");
 }
}

实例二

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

实例三

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

实例四

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

实例五

var iN = new iNotify().init({
 effect: 'flash',
 interval: 500,
 message:"有消息拉!",
 audio:{
  file: 'msg.mp4'
 }
}).setFavicon(10).player();

实例五

var iN = new iNotify().init({
 effect: 'flash',
 interval: 500,
 message:"有消息拉!",
 audio:{
  file: 'msg.mp4'//可以使用数组传多种格式的声音文件
 },
 notification:{
  title:"通知!",
  icon:"",
  body:'您来了一条新消息'
 }
}).setFavicon(10).player();
//弹出chrome通知,不传参数为预设值...
iN.notify(); 
iN.notify({
 title:"新通知",
 body:"打雷啦,下雨啦..."
});

实例六

var iN = new iNotify({
 effect: 'flash',
 interval: 500,
 message:"有消息拉!",
 audio:{
  file: ['msg.mp4','msg.mp3','msg.wav']
 },
 notification:{
  title:"通知!",
  body:'您来了一条新消息'
 }
})
iN.setFavicon(10).player();
var n = new iNotify()
n.init({
 effect: 'flash',
 interval: 500,
 message:"有消息拉!",
 audio:{
  file: ['openSub.mp4','openSub.mp3','openSub.wav']
 },
 notification:{
  title:"通知!",
  icon:"",
  body:'您来了一个客户'
 }
})
n.setFavicon(10).player();

总结

以上所述是小编给大家介绍的Javascript快速实现浏览器系统通知,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js继承的实现代码
Aug 05 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
深入浅出es6模板字符串
Aug 26 #Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 #Javascript
详解Angular4 路由设置相关
Aug 26 #Javascript
浅谈Angular路由守卫
Aug 26 #Javascript
javascript实现文字无缝滚动效果
Aug 26 #Javascript
node实现定时发送邮件的示例代码
Aug 26 #Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
You might like
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jQuery.each使用详解
2015/07/07 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
mac使用python识别图形验证码功能
2020/01/10 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
党课学习思想汇报
2014/01/02 职场文书
财务主管自我鉴定
2014/01/17 职场文书
个人求职信范例
2014/01/29 职场文书
小学音乐教学反思
2014/02/05 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
四议两公开实施方案
2014/03/28 职场文书
分家协议书
2014/04/21 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
社区干部培训心得体会
2016/01/06 职场文书
亲情作文之母爱
2019/09/25 职场文书