https://github.com/jaywcjlove/iNotify

   

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

这是重复造轮子...,标题闪烁、或者滚动提示,favicon数字显示。打开chrome浏览器调试工具,按照下面截图的方式放到调试里面调用一下,你就可以看到效果了。

下载

$ 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("on click")
},
onshow:function(){
console.log("on show")
},
});
  • title 一定会被显示的通知标题。
  • dir 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)。
  • icon 一个图片的URL,将被用于显示通知的图标。
  • body 通知中额外显示的字符串。
  • openurl 点击打开指定 URL。
  • onclick 每当用户点击通知时被触发。
  • onshow 当通知显示的时候被触发。
  • onerror 每当通知遇到错误时被触发。
  • onclose 当用户关闭通知时被触发。

其它

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();

iNotify.js通知JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。的更多相关文章

  1. JS实现浏览器的title闪烁

    经常可以看见的title里面的消息提示,下面是JS的一种实现方法:主要是通过setTimeout方法设置一个定时器,切换消息提示,从而达title到消息提示的闪烁. <html> < ...

  2. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  3. 改进:js修改iOS微信浏览器的title

    问题简介 前端入门没多久,可能连入门也不算,最近网上流行各自书籍改名,什么<前端开发,从入门到放弃>,<Android开发,从入门到改行>之类的,程序员真是个爱自嘲的群体,但我 ...

  4. JS 回车提交,兼容IE、火狐、Opera、Chrome、Safari……

    1.JavaScript 方法: <script>      document.onkeydown=function(event){          e = event ? event  ...

  5. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  6. PNotify – 简单易用的 JS 通知,消息提示插件

    PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...

  7. 用js识别是否360浏览器

    360浏览器说实话比较恶,以前可以通过内核返回的字符串判定是否包含"360"字样的方法来判定 如以下代码 window.navigator.userAgent.indexOf('3 ...

  8. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  9. js+jquery检测用户浏览器型号(包括对360浏览器的检测)

    做网站,js检测用户浏览器的版本,是经常要使用到,今天自己写了一个js,完成了对于一些常见浏览器的检测,但是,偏偏对于360浏览器的检测没有任 何办法,研究了一会儿,无果.无论是360安全浏览器,还是 ...

随机推荐

  1. 【mysql】---php链接数据库---【巷子】

    一.创建public文件 <?php //第一件事情连接数据库 header("content-type:text/html;charset=utf8"); //服务器地址 ...

  2. python金融与量化分析------Matplotlib(绘图和可视化)

    -----------------------------------------------------------Matplotlib:绘图和可视化------------------------ ...

  3. easyui---修改删除查询

    修改:在toolsbar 修改工具中 { text:"编辑用户", iconCls:"icon-edit", handler:function(){ var s ...

  4. myEclipse中项目无法部署到tomcat

    问题现象: 从svn上新下载了项目到win环境上. 部署项目的时候,在servers视图里,Add Deployment,如下图: 发现只有一个项目可以加载,另外的项目看不到:可是明明我并没有部署过啊 ...

  5. .NET Core开发日志——Edge.js

    最近在项目中遇到这样的需求:要将旧有系统的一部分业务逻辑集成到新的自动化流程工具中.这套正在开发的自动化工具使用的是C#语言,而旧有系统的业务逻辑则是使用AngularJS在前端构建而成.所以最初的考 ...

  6. [No000016B]清华maven库配置settings.xml

    路径:"C:\Users\%USERNAME%\.m2\settings.xml" <settings xmlns="http://maven.apache.org ...

  7. [No0000FB]C# 命名空间(Namespace)

    命名空间的设计目的是提供一种让一组名称与其他名称分隔开的方式.在一个命名空间中声明的类的名称与另一个命名空间中声明的相同的类的名称不冲突. 定义命名空间 命名空间的定义是以关键字 namespace  ...

  8. iOS ARC编译器规则和内存管理规则

    iOS 开发当中,自动引用计数已经是标准的内存管理方案.除了一些老旧的项目或者库已经没有人使用手动来管理内存了吧. ARC无疑是把开发者从繁琐的保留/释放引用对象逻辑中解脱出来.但这并不是万事大吉了, ...

  9. Exception 07 : org.hibernate.LazyInitializationException: could not initialize proxy - no Session

    异常名称: org.hibernate.LazyInitializationException: could not initialize proxy - no Session 异常截图: 异常详情: ...

  10. ionic cordova screenshot 使用和操作

    如何调用cordova 中的screenshot插件进行截图 首先添加 ionic cordova plugin add com.darktalker.cordova.screenshot npm i ...