JS 实现的浏览器系统通知 iNotify.js
注:本分非原创;信息来源 oschina
授权协议:MIT
开发语言:JavaScript
操作系统:跨平台
软件作者:同一种调调
iNotify.js 详细介绍
JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。
下载
$ 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("")
实例三
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();
JS 实现浏览器的 title 闪烁、滚动、声音提示、通知,没有依赖。https://github.com/jaywcjlove/iNotify
|
JS 实现的浏览器系统通知 iNotify.js的更多相关文章
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
-----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...
- iNotify.js通知JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。
https://github.com/jaywcjlove/iNotify JS 实现浏览器的 title 闪烁.滚动.声音提示.chrome.Firefox.Safari等系统通知. 这是重 ...
- JS获取当前浏览器的类型
<script type=“text/javascript”> function isIE(){return navigator.appName.indexOf(“Microsoft In ...
- Safari浏览器中对js Date对象的支持
看了一下自己上一次写博客还是3月份,那是还没有毕业,实习也没那么多事情,毕业设计也才刚开始做,那时天天晚上都把电脑带回家继续学习,而现在一工作忙为借口已经不怎么进行什么知识总结了,只是在印象笔记里做做 ...
- 通过JS检测360浏览器
如何通过JS检测360浏览器? 尝试了一大堆方法,网上大多数办法都是通过navigator.userAgent来判断,这可能在几年前是行得通的,现在360userAgent输出来跟谷歌除了版本号其余一 ...
- SlimerJS – Web开发人员可编写 JS 控制的浏览器
SlimerJS 是一个提供给 Web 开发人员,可通过脚本编程控制的浏览器.它可以让你使用 Javascript 脚本操纵一个网页:打开一个网页,点击链接,修改的内容等,这对于做功能测试,页面自动机 ...
- JS 关闭 页面 浏览器 事件
JS监听关闭浏览器事件关键字: js监听关闭浏览器事件Onunload与OnbeforeunloadOnunload,onbeforeunload都是在刷新或关闭时调用,可以在<script&g ...
- js/jquery判断浏览器的方法小结
在网站前端开发中,浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把 ...
- js/jQuery判断浏览器名称、内核版本、浏览器壳
1.js方法 /* 判断浏览器名称和版本 目前只能判断:ie/firefox/chrome/opera/safari 2012年5月16日23:47:08 浏览器内核UA:UA; 浏览器内核名称:NV ...
随机推荐
- Filter 快速开始 异步Servlet 异步请求 AsyncContext 异步线程 异步派发 过滤器拦截
[web.xml] <filter> <filter-name>normalFilter</filter-name> <filter-class>net ...
- Java基础03-12_对象比较
对象比较 如果说现在有两个数字要判断是否相等,可以使用"=="完成 如果是字符串要判断是否相等使用"equals()" 但是如果说现在有一个自定义的类,要想判断 ...
- web请求流程
具体流程解析参考文章:浏览器请求发起处理
- Java生成短链接
为什么要生成短链接 微博之所以要是使用短链接,主要是因为微博只允许发140 字,如果链接地址太长的话,那么发送的字数将大大减少. 那么使用短链接的作用有哪些呢?1.字数,2.统计,3.监控,4.过滤 ...
- 02、natapp的使用
使用方法 官网: https://natapp.cn 命令启动:natapp -authtoken=***************** 文档:https://natapp.cn/article/nat ...
- java语言什么时候诞生的?
java语言什么时候诞生的?创始人是谁?何时发布的? Java编程语言是sun Microsystems公司JamesGosling在1990年创建的1995年公布于世
- Css - 页面标签页图标
Css - 页面标签页图标 <head> <meta charset="utf-8" /> <title>京东(JD.COM)- ...
- 两个类似的ViewModel一个可以重写事件,另一个不能重写事件,是哪里出了错。
答:继承错了,BaseViewModel里面是事件.
- 【转】Python之mmap内存映射模块(大文本处理)说明
[转]Python之mmap内存映射模块(大文本处理)说明 背景: 通常在UNIX下面处理文本文件的方法是sed.awk等shell命令,对于处理大文件受CPU,IO等因素影响,对服务器也有一定的压力 ...
- python模块之sniffio
嗅探python用了哪个异步库 from sniffio import current_async_library import trio import asyncio async def print ...