JS 實現瀏覽器通知
JS 實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統通知。
這是重復造輪子...，標題閃爍、或者滾動提示，favicon數字顯示。打開chrome瀏覽器調試工具，按照下面截圖的方式放到調試里面調用一下，你就可以看到效果了。
下載
npm
<br />
$ npm install title-notify<br />
bower
<br />
$ bower install inotify<br />
init
effect: flash | scroll | favicon
js <br />
iNotify.init({<br />
message: '有消息了。',//標題<br />
effect: 'flash', // flash | scroll 閃爍還是滾動<br />
//可選播放聲音<br />
audio:{<br />
file: 'msg.mp4'<br />
},<br />
//標題閃爍，或者滾動速度<br />
interval: 1000,<br />
//可選，默認綠底白字的 Favicon<br />
updateFavicon:{<br />
// favicon 字體顏色<br />
textColor: "#fff",<br />
//背景顏色，設置背景顏色透明，將值設置為“transparent”<br />
backgroundColor: "#2F9A00" <br />
},<br />
//可選chrome瀏覽器通知，默認不填寫就是下面的內容<br />
notification:{<br />
title:"通知！",//設置標題<br />
icon:"",//設置圖標 icon 默認為 Favicon<br />
body:'您來了一條新消息'//設置消息內容<br />
}<br />
})<br />
聲音設置
player
播放聲音
js<br />
iNotify.player()<br />
loopPlay
自動播放聲音
js<br />
iNotify.loopPlay()<br />
stopPlay
停止播放聲音
js<br />
iNotify.stopPlay()<br />
setURL
設置播放聲音URL
js<br />
iNotify.setURL()<br />
title通知
setTitle
設置標題
js<br />
iNotify.setTitle('新標題')<br />
setInterval
設置時間間隔
js<br />
iNotify.setInterval(2000)<br />
addTimer
添加計數器
js<br />
iNotify.addTimer()<br />
clearTimer
清除計數器
js<br />
iNotify.clearTimer()<br />
favicon通知
setFavicon
設置icon 顯示數字
js<br />
iNotify.setFavicon(10)<br />
faviconClear
清除數字顯示原來的icon
js<br />
iNotify.faviconClear()<br />
chrome通知
notify
彈出chrome通知，不傳參數為預設值...
js<br />
iNotify.notify(); <br />
iNotify.notify({<br />
title:"新通知"<br />
body:"打雷啦，下雨啦..."<br />
});<br />
其它
iNotify.init().title; 獲取標題
例子
實例一
js<br />
function iconNotify(num){<br />
if(!notify) {<br />
var notify = iNotify.init({<br />
effect: 'flash',<br />
interval: 500<br />
});<br />
}<br />
if(num===0){<br />
notify.faviconClear()<br />
notify.setTitle();<br />
}else if(num<100){<br />
notify.setFavicon(num)<br />
notify.setTitle("有新消息！");<br />
}else if(num>99){<br />
notify.setFavicon('..')<br />
notify.setTitle("有新消息！");<br />
}<br />
}<br />
實例二
js<br />
var notify = iNotify.init({<br />
effect: 'flash',<br />
interval: 500<br />
});<br />
notify.setFavicon("1")<br />
實例三
js<br />
var iN = iNotify.init({<br />
effect: 'flash',<br />
interval: 500,<br />
message:"有消息拉！",<br />
updateFavicon:{//可選，默認綠底白字<br />
textColor: "#fff",// favicon 字體顏色<br />
backgroundColor: "#2F9A00" //背景顏色<br />
}<br />
}).setFavicon(10);<br />
實例四
js<br />
var iN = iNotify.init().setFavicon(5);<br />
實例五
js<br />
var iN = iNotify.init({<br />
effect: 'flash',<br />
interval: 500,<br />
message:"有消息拉！",<br />
audio:{<br />
file: 'msg.mp4'<br />
}<br />
}).setFavicon(10).player();<br />
實例五
js<br />
var iN = iNotify.init({<br />
effect: 'flash',<br />
interval: 500,<br />
message:"有消息拉！",<br />
audio:{<br />
file: 'msg.mp4'<br />
},<br />
notification:{<br />
title:"通知！",<br />
icon:"",<br />
body:'您來了一條新消息'<br />
}<br />
}).setFavicon(10).player();<br />
<br />
//彈出chrome通知，不傳參數為預設值...<br />
iN.notify(); <br />
<br />
iN.notify({<br />
title:"新通知"<br />
body:"打雷啦，下雨啦..."<br />
}); <br />