通知
JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome通知
这是重复造轮子…,标题闪烁、或者滚动提示,favicon数字显示。打开chrome浏览器调试工具,按照下面截图的方式放到调试里面调用一下,你就可以看到效果了。
下载
npm
bower
init
effect: flash | scroll | favicon
iNotify.init({
message: '有消息了。',//标题
effect: 'flash', // flash | scroll 闪烁还是滚动
//可选播放声音
audio:{
file: 'msg.mp4'
},
//标题闪烁,或者滚动速度
interval: 1000,
//可选,默认绿底白字的 Favicon
updateFavicon:{
// favicon 字体颜色
textColor: "#fff",
//背景颜色,设置背景颜色透明,将值设置为“transparent”
backgroundColor: "#2F9A00"
},
//可选chrome浏览器通知,默认不填写就是下面的内容
notification:{
title:"通知!",//设置标题
icon:"",//设置图标 icon 默认为 Favicon
body:'您来了一条新消息'//设置消息内容
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
代码laycode - v1.1
声音设置
player
播放声音
loopPlay
自动播放声音
stopPlay
停止播放声音
setURL
设置播放声音URL
title通知
setTitle
设置标题
setInterval
设置时间间隔
addTimer
添加计数器
clearTimer
清除计数器
favicon通知
setFavicon
设置icon 显示数字
faviconClear
清除数字显示原来的icon
chrome通知
notify
弹出chrome通知,不传参数为预设值…
iNotify.notify();
iNotify.notify({
title:"新通知"
body:"打雷啦,下雨啦..."
});
- 1
- 2
- 3
- 4
- 5
- 6
代码laycode - v1.1
其它
iNotify.init().title;
获取标题
例子
实例一
function iconNotify(num){
if(!notify) {
var notify = 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("有新消息!");
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
代码laycode - v1.1
实例二
var notify = iNotify.init({
effect: 'flash',
interval: 500
});
notify.setFavicon("1")
- 1
- 2
- 3
- 4
- 5
- 6
代码laycode - v1.1
实例三
var iN = iNotify.init({
effect: 'flash',
interval: 500,
message:"有消息拉!",
updateFavicon:{//可选,默认绿底白字
textColor: "#fff",// favicon 字体颜色
backgroundColor: "#2F9A00" //背景颜色
}
}).setFavicon(10);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
代码laycode - v1.1
实例四
实例五
var iN = iNotify.init({
effect: 'flash',
interval: 500,
message:"有消息拉!",
audio:{
file: 'msg.mp4'
}
}).setFavicon(10).player();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
代码laycode - v1.1
实例五
var iN = 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:"打雷啦,下雨啦..."
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
代码laycode - v1.1