JS实现浏览器的title闪烁、滚动、声音提示、chrome通知
2017-04-17 16:50
821 查看
通知
JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome通知
这是重复造轮子…,标题闪烁、或者滚动提示,favicon数字显示。打开chrome浏览器调试工具,按照下面截图的方式放到调试里面调用一下,你就可以看到效果了。
下载
npm
$ npm install title-notify1
代码laycode
- v1.1
bower
$ bower install inotify1
代码laycode
- v1.1
init
effect: flash | scroll | faviconiNotify.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
播放声音iNotify.player()1
代码laycode
- v1.1
loopPlay
自动播放声音iNotify.loopPlay()1
代码laycode
- v1.1
stopPlay
停止播放声音iNotify.stopPlay()1
代码laycode
- v1.1
setURL
设置播放声音URLiNotify.setURL()1
代码laycode
- v1.1
title通知
setTitle
设置标题iNotify.setTitle('新标题')1
代码laycode
- v1.1
setInterval
设置时间间隔iNotify.setInterval(2000)1
代码laycode
- v1.1
addTimer
添加计数器iNotify.addTimer()1
代码laycode
- v1.1
clearTimer
清除计数器iNotify.clearTimer()1
代码laycode
- v1.1
favicon通知
setFavicon
设置icon 显示数字iNotify.setFavicon(10)1
代码laycode
- v1.1
faviconClear
清除数字显示原来的iconiNotify.faviconClear()1
代码laycode
- v1.1
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().setFavicon(5);1
代码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
相关文章推荐
- JS实现浏览器的title闪烁、滚动、声音提示、通知
- JS实现浏览器的title闪烁
- js实现浏览器title闪烁
- JS实现超简洁网页title标题跑动闪烁提示效果代码
- 利用JS实现浏览器的title闪烁
- js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 兼容IE/FF/Chrome
- javascript 替换浏览器Tab的title实现消息通知提示
- 利用JS实现浏览器的title闪烁
- IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结
- 用js实现的图片在浏览器里面来回滚动效果 <兼容ie和ff>
- js实现的标题栏新消息闪烁提示效果
- JS实现浏览器状态栏文字闪烁效果的方法
- JS浏览器滚轮事件实现横向滚动照片展
- 如何实现任务栏浏览器图标闪烁,提示用户
- js 实现文字无缝滚动(图片无缝滚动) 兼容各种浏览器
- JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)
- js+css实现的自定义浏览器滚动条
- js关闭当前页面不弹出提示的方法 js实现浏览器的各种菜单命令
- JS+CSS实现侧边栏跟随浏览器滚动效果