Javascript快速實(shí)現(xiàn)瀏覽器系統(tǒng)通知
JS 實(shí)現(xiàn)瀏覽器的 title 閃爍、滾動(dòng)、聲音提示、chrome、Firefox、Safari等系統(tǒng)通知。
下載
$ 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: '有消息了。',//標(biāo)題 effect: 'flash', // flash | scroll 閃爍還是滾動(dòng) openurl:"http://www.bing.com", // 點(diǎn)擊彈窗打開連接地址 onclick:function(){ //點(diǎn)擊彈出的窗之行事件 console.log("---") }, //可選播放聲音 audio:{ //可以使用數(shù)組傳多種格式的聲音文件 file: ['msg.mp4','msg.mp3','msg.wav'] //下面也是可以的哦 //file: 'msg.mp4' }, //標(biāo)題閃爍,或者滾動(dòng)速度 interval: 1000, //可選,默認(rèn)綠底白字的 Favicon updateFavicon:{ // favicon 字體顏色 textColor: "#fff", //背景顏色,設(shè)置背景顏色透明,將值設(shè)置為“transparent” backgroundColor: "#2F9A00" }, //可選chrome瀏覽器通知,默認(rèn)不填寫就是下面的內(nèi)容 notification:{ title:"通知!",//設(shè)置標(biāo)題 icon:"",//設(shè)置圖標(biāo) icon 默認(rèn)為 Favicon body:'您來(lái)了一條新消息'//設(shè)置消息內(nèi)容 } })
isPermission
判斷瀏覽器彈框通知是否被阻止。
iNotify.isPermission()
聲音設(shè)置
player
播放聲音
iNotify.player() loopPlay
自動(dòng)播放聲音
iNotify.loopPlay() stopPlay
停止播放聲音
iNotify.stopPlay() setURL
設(shè)置播放聲音URL
iNotify.setURL('msg.mp3')// 設(shè)置一個(gè) iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 設(shè)置多個(gè)
title通知
最新的版本默認(rèn)不播放標(biāo)題閃爍動(dòng)畫,初始化之后需要調(diào)用 setTitle(true) 方法才播放標(biāo)題動(dòng)畫。
setTitle
設(shè)置標(biāo)題,
iNotify.setTitle(true)//播放動(dòng)畫 iNotify.setTitle('新標(biāo)題')//閃爍新標(biāo)題 iNotify.setTitle()//清除閃爍 顯示原來(lái)的標(biāo)題 setInterval
設(shè)置時(shí)間間隔
iNotify.setInterval(2000) addTimer
添加計(jì)數(shù)器
iNotify.addTimer() clearTimer
清除計(jì)數(shù)器
iNotify.clearTimer()
favicon通知
setFavicon
設(shè)置icon 顯示數(shù)字
iNotify.setFavicon(10) faviconClear
清除數(shù)字顯示原來(lái)的icon
iNotify.faviconClear()
chrome通知
notify
彈出chrome通知,不傳參數(shù)為預(yù)設(shè)值...
iNotify.notify(); iNotify.notify({ title:"新通知", body:"打雷啦,下雨啦...", openurl:"http://www.bing.com", onclick:function(){ console.log("---") } });
其它
iNotify.init().title; 獲取標(biāo)題
例子
new iNotify({ effect: 'flash', interval: 500 })
上面的例子跟下面的是一樣的
new iNotify().init({ effect: 'flash', interval: 500 });
實(shí)例一
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("有新消息!"); } }
實(shí)例二
var notify = new iNotify().init({ effect: 'flash', interval: 500 }); notify.setFavicon("1")
實(shí)例三
var iN = new iNotify().init({ effect: 'flash', interval: 500, message:"有消息拉!", updateFavicon:{//可選,默認(rèn)綠底白字 textColor: "#fff",// favicon 字體顏色 backgroundColor: "#2F9A00" //背景顏色 } }).setFavicon(10);
實(shí)例四
var iN = new iNotify().init().setFavicon(5);
實(shí)例五
var iN = new iNotify().init({ effect: 'flash', interval: 500, message:"有消息拉!", audio:{ file: 'msg.mp4' } }).setFavicon(10).player();
實(shí)例五
var iN = new iNotify().init({ effect: 'flash', interval: 500, message:"有消息拉!", audio:{ file: 'msg.mp4'//可以使用數(shù)組傳多種格式的聲音文件 }, notification:{ title:"通知!", icon:"", body:'您來(lái)了一條新消息' } }).setFavicon(10).player(); //彈出chrome通知,不傳參數(shù)為預(yù)設(shè)值... iN.notify(); iN.notify({ title:"新通知", body:"打雷啦,下雨啦..." });
實(shí)例六
var iN = new iNotify({ effect: 'flash', interval: 500, message:"有消息拉!", audio:{ file: ['msg.mp4','msg.mp3','msg.wav'] }, notification:{ title:"通知!", body:'您來(lái)了一條新消息' } }) 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:'您來(lái)了一個(gè)客戶' } }) n.setFavicon(10).player();
總結(jié)
以上所述是小編給大家介紹的Javascript快速實(shí)現(xiàn)瀏覽器系統(tǒng)通知,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript獲取當(dāng)前網(wǎng)頁(yè)最后修改時(shí)間的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前網(wǎng)頁(yè)最后修改時(shí)間的方法,涉及javascript中document.lastModified屬性的使用技巧,需要的朋友可以參考下2015-04-04Vue elementUI實(shí)現(xiàn)免密登陸與號(hào)碼綁定功能
這篇文章主要介紹了Vue elementUI實(shí)現(xiàn)免密登陸與號(hào)碼綁定功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11document.documentElement && document.documentElement
document.documentElement && document.documentElement.scrollTop...2007-12-12js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子
這篇文章介紹了js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子,有需要的朋友可以參考一下2013-10-10js原生之焦點(diǎn)圖轉(zhuǎn)換加定時(shí)器實(shí)例
本文主要分享了在jQuery之焦點(diǎn)圖轉(zhuǎn)換-左右的基礎(chǔ)上,將jQuery代碼改成js原生,并添加定時(shí)器(setInterval()和clearInterval())的實(shí)例代碼。需要的朋友可以參考借鑒2016-12-12