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 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
Node与Python 双向通信的实现代码
Jul 16 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
php实现httpRequest的方法
2015/03/13 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
简单介绍Python中的floor()方法
2015/05/15 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Python map及filter函数使用方法解析
2020/08/06 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
英国健身专家:WIT Fitness
2021/02/09 全球购物
车间组长岗位职责
2013/12/20 职场文书
教师产假请假条范文
2014/04/10 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
师德师风演讲稿
2014/05/05 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
python自动化之如何利用allure生成测试报告
2021/05/02 Python
Golang map映射的用法
2022/04/22 Golang