JS實現瀏覽器的title閃爍、滾動、聲音提示、通知
阿新 • • 發佈:2019-02-07
通知
JS 實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統通知。
這是重複造輪子...,標題閃爍、或者滾動提示,favicon數字顯示。開啟chrome瀏覽器除錯工具,按照下面截圖的方式放到除錯裡面呼叫一下,你就可以看到效果了。
下載
npm
$ npm install title-notify
bower
$ bower install inotify
init
effect: flash | scroll | favicon
var iNotify = new iNotify().init() //推薦下面寫法 var iNotify = new iNotify({ message: '有訊息了。',//標題 effect: 'flash', // flash | scroll 閃爍還是滾動 //可選播放聲音 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:"打雷啦,下雨啦..."
});
其它
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:"通知!",
body:'您來了一個客戶'
}
})
n.setFavicon(10).player();