iNotify.js JS 实现的浏览器系统通知开源项目

我要开发同款
小弟调调2017年08月21日
236阅读

技术信息

开源地址
https://gitee.com/jaywcjlove/iNotify
授权协议
MIT

作品详情

iNotify.js主要是调用Chrome、Firefox、Safari等浏览器提供的系统通知API,实现浏览器系统通知,实现title标签闪烁、滚动、声音提示。favico图标数字信息通知,声音播放等.....

例子Demo预览,文档中找哦

 

下载# v2.x$ pm istall @wcjiag/otify --save# v1.x $ pm istall title-otify --save使用import Notify from '@wcjiag/otify';cost otify = ew Notify({  message: '有消息了。', // 标题  effect: 'flash', // flash | scroll 闪烁还是滚动  opeurl:'https://github.com/jaywcjlove/iNotify', // 点击弹窗打开连接地址  oclick: () => { // 点击弹出的窗之行事件    cosole.log('---')  },  // 可选播放声音  audio:{    // 可以使用数组传多种格式的声音文件    file: ['msg.mp4','msg.mp3','msg.wav']    // 下面也是可以的哦    // file: 'msg.mp4'  },  // 标题闪烁,或者滚动速度  iterval: 1000,  // 可选,默认绿底白字的  Favico  updateFavico:{    // favico 字体颜色    textColor: '#fff',    // 背景颜色,设置背景颜色透明,将值设置为“trasparet”    backgroudColor: '#2F9A00'   },  // 可选chrome浏览器通知,默认不填写就是下面的内容  otificatio:{    title:'通知!', // 设置标题    ico:'', // 设置图标 ico 默认为 Favico    body:'您来了一条新消息', // 设置消息内容  }});otify.player();

在您的HTML中手动下载并引入 otify.js,你也可以通过 UNPKG 进行下载:

var otify = ew Notify({  effect: 'flash',  iterval: 500,});otify.setFavico('1');optio

message:Strig标题

effect:Strig,flash|scroll|favico闪烁还是滚动

audio:可选播放声音

file:Strig/Array可以使用数组传多种格式的声音文件

iterval:Number标题闪烁,或者滚动速度

opeurl:Strig点击弹窗打开连接地址

oclick:Fuctio弹窗点击事件

updateFavico:设置Favico图标颜色

textColor:设置favico字体颜色

backgroudColor:背景颜色,设置背景颜色透明,将值设置为 trasparet

otificatio:可选chrome浏览器通知,默认不填写就是下面的内容

title:默认值 通知!

ico:设置图标ico默认为Favico

body:设置消息内容

isPermissio

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

iNotify.isPermissio()声音设置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() // 清除闪烁 显示原来的标题setIterval

设置时间间隔

iNotify.setIterval(2000)addTimer

添加计数器

iNotify.addTimer()clearTimer

清除计数器

iNotify.clearTimer()favico通知setFavico

设置ico显示数字或者文本

iNotify.setFavico(10)setFavicoColor

设置ico显示文本颜色

iNotify.setFavicoColor('#0043ff')setFavicoBackgroudColor

设置ico显示文本颜色

iNotify.setFavicoBackgroudColor('#0043ff')// 设置字体和背景颜色iNotify.setFavicoColor('#f5ff00').setFavicoBackgroudColor('red');favicoClear

清除数字显示原来的ico

iNotify.favicoClear()chrome通知otify

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

iNotify.otify(); iNotify.otify({  title: '新通知',  body: '打雷啦,下雨啦...',  opeurl: 'https://www.big.com',  oclick: fuctio() {    cosole.log('o click')  },  oshow: fuctio() {    cosole.log('o show')  },});

title一定会被显示的通知标题。

dir文字的方向;它的值可以是auto(自动),ltr(从左到右),orrtl(从右到左)。

ico一个图片的URL,将被用于显示通知的图标。

body通知中额外显示的字符串。

opeurl点击打开指定URL。

oclick每当用户点击通知时被触发。

oshow当通知显示的时候被触发。

oerror每当通知遇到错误时被触发。

oclose当用户关闭通知时被触发。

其它

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

例子实例一fuctio icoNotify(um){  if(!otify) {    var otify = ew Notify({      effect: 'flash',      iterval: 500    });  }  if(um===0){    otify.favicoClear()    otify.setTitle();  } else if (um < 100){    otify.setFavico(um)    otify.setTitle('有新消息!');  } else if (um > 99){    otify.setFavico('..')    otify.setTitle('有新消息!');  }}实例二var otify = ew Notify({  effect: 'flash',  iterval: 500,});otify.setFavico('1');实例三var iN = ew Notify({  effect: 'flash',  iterval: 500,  message: '有消息拉!',  updateFavico:{ // 可选,默认绿底白字    textColor: '#fff',// favico 字体颜色    backgroudColor: '#2F9A00', // 背景颜色  }}).setFavico(10);实例四var iN = ew Notify().setFavico(5);实例五var iN = ew Notify({  effect: 'flash',  iterval: 500,  message: "有消息拉!",  audio:{    file: 'msg.mp4',  }}).setFavico(10).player();实例五var iN = ew Notify({  effect: 'flash',  iterval: 500,  message: '有消息拉!',  audio:{    file: 'msg.mp4'//可以使用数组传多种格式的声音文件  },  otificatio:{    title: '通知!',    ico: '',    body: '您来了一条新消息'  }}).setFavico(10).player();//弹出chrome通知,不传参数为预设值...iN.otify(); iN.otify({  title: '新通知',  body: '打雷啦,下雨啦...'});实例六var iN =  ew Notify({  effect: 'flash',  iterval: 500,  message: '有消息拉!',  audio:{    file: ['msg.mp4', 'msg.mp3', 'msg.wav']  },  otificatio:{    title: '通知!',    body:'您来了一条新消息'  }})iN.setFavico(10).player();var  = ew Notify().iit({  effect: 'flash',  iterval: 500,  message: '有消息拉!',  audio:{    file: ['opeSub.mp4', 'opeSub.mp3', 'opeSub.wav'],  },  otificatio:{    title:'通知!',    ico: '',    body:'您来了一个客户',  }}).setFavico(10).player();

功能介绍

iNotify.js 主要是调用 Chrome、Firefox、Safari 等浏览器提供的系统通知 API,实现浏览器系统通知,实现 title 标签 闪烁、滚动、声音提示。favicon 图...

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论