자바 script 브 라 우 저 시스템 알림 빠 른 구현

JS 는 브 라 우 저의 title 깜빡 임,스크롤,음성 알림,chrome,Firefox,Safari 등 시스템 알림 을 실현 합 니 다.

다운로드 하 다.

$ 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: '    。',//  
 effect: 'flash', // flash | scroll       
 openurl:"http://www.bing.com", //           
 onclick:function(){ //          
  console.log("---")
 },
 //      
 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']) //     

타이틀 알림
최신 버 전 은 기본적으로 제목 반 짝 임 애니메이션 을 재생 하지 않 습 니 다.초기 화 된 후에 setTitle(true)을 사용 해 야 제목 애니메이션 을 재생 할 수 있 습 니 다.
setTitle
제목 설정,

iNotify.setTitle(true)//    
iNotify.setTitle('   ')//     
iNotify.setTitle()//            
setInterval

 시간 간격 설정

iNotify.setInterval(2000)
addTimer

카운터 추가

iNotify.addTimer()
clearTimer

카운터 지우 기

iNotify.clearTimer()

favicon 알림setFavicon아이콘 표시 숫자 설정

iNotify.setFavicon(10)
faviconClear

숫자 지우 기iNotify.faviconClear()chrome 알림notifychrome 알림 팝 업,매개 변 수 를 미리 설정 하지 않 음...

iNotify.notify(); 
iNotify.notify({
 title:"   ",
 body:"   ，   ...",
 openurl:"http://www.bing.com",
 onclick:function(){
  console.log("---")
 }
});

기타

iNotify.init().title;     

예시

new iNotify({
 effect: 'flash',
 interval: 500
})

위의 예 는 아래 의 것 과 같다.

new iNotify().init({
 effect: 'flash',
 interval: 500
});

실례 1

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("    ！");
 }
}

실례 2

var notify = new iNotify().init({
 effect: 'flash',
 interval: 500
});
notify.setFavicon("1")

실례 3

var iN = new iNotify().init({
 effect: 'flash',
 interval: 500,
 message:"    ！",
 updateFavicon:{//  ，      
  textColor: "#fff",// favicon     
  backgroundColor: "#2F9A00" //    
 }
}).setFavicon(10);

실례 4

var iN = new iNotify().init().setFavicon(5);

실례 5

var iN = new iNotify().init({
 effect: 'flash',
 interval: 500,
 message:"    ！",
 audio:{
  file: 'msg.mp4'
 }
}).setFavicon(10).player();

실례 5

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:"   ，   ..."
});

실례 6

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:"  ！",
  icon:"",
  body:'       '
 }
})
n.setFavicon(10).player();

총결산
위 에서 말 한 것 은 편집장 이 소개 한 자 바스 크 립 트 가 브 라 우 저 시스템 알림 을 신속하게 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!