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 相关文章推荐
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
深入浅出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 高级课程笔记 面向对象
2009/06/21 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
php调用C代码的实现方法
2014/03/11 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
Python机器学习logistic回归代码解析
2018/01/17 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
用python批量下载apk
2020/12/29 Python
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
写好自荐信的技巧
2013/11/08 职场文书
语文教学感言
2014/02/06 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
车辆转让协议书
2014/04/15 职场文书
施工协议书范本
2014/04/22 职场文书
班级体育活动总结
2014/07/05 职场文书
群众路线领导对照材料
2014/08/23 职场文书
前台岗位职责范本
2015/04/16 职场文书
部门2015年度工作总结
2015/04/29 职场文书
企业法人代表证明书
2015/06/18 职场文书
主婚人致辞精选
2015/07/28 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
Node.js实现断点续传
2021/06/23 Javascript
基于Python实现流星雨效果的绘制
2022/03/18 Python
nginx七层负载均衡配置详解
2022/07/15 Servers