JS實現瀏覽器的title閃爍、滾動、聲音提示、通知

SillyMonkey 發布于2019-08-21 10:30 / 2126人閱讀

摘要：通知實現瀏覽器的閃爍滾動聲音提示等系統通知。先這是重復造輪子，標題閃爍或者滾動提示，數字顯示。聲音設置播放聲音自動播放聲音停止播放聲音設置播放聲音設置一個設置多個通知最新的版本默認不播放標題閃爍動畫，初始化之后需要調用方法才播放標題動畫。

通知

JS 實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統通知。

Demo 先start

這是重復造輪子...，標題閃爍、或者滾動提示，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:"您來了一條新消息"http://設置消息內容
    }
})

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"http://可以使用數組傳多種格式的聲音文件
    },
    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();

GPU云服務器云服務器 title閃爍 js實現提示語音 js實現輸入提示 js實現搜索輸入提示

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85665.html

iNotify.js 2 實現瀏覽器的title閃爍滾動聲音提示，彈出通知

摘要：實現瀏覽器的閃爍滾動聲音提示等系統彈出通知。它沒有依賴，壓縮只有只有，實例預覽。下載使用有消息了。文字的方向它的值可以是自動從左到右從右到左。一個圖片的，將被用于顯示通知的圖標。當用戶關閉通知時被觸發。 JS 實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統彈出通知。它沒有依賴，壓縮只有只有4.66kb(gzipped: 1.70kb)，...

fantix 2019-08-22 18:44 評論0 收藏0
web聊天系統的消息通知問題

摘要：消息提示無非三種方式聲音提示，桌面彈窗和閃爍提醒。聲音提示注意聲音提示前提示已經加載了聲音文件，有文章寫的很多是臨時一個對象，然后這樣做是非常不好的，因為你每次調用聲音的時候都會去后臺請求一下這個聲音文件。所以先加載出來是最好的方法。 web消息提示無非三種方式：聲音提示，桌面彈窗和title閃爍提醒。下面做一一介紹。聲音提示注意聲音提示前提示已經加載了聲音文件，有文章寫的很多是臨...

Soarkey 2019-08-19 18:43 評論0 收藏0
推薦輕量高效無依賴的開源JS插件和庫

摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。在這里維持一個持續更新的地方圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

AlphaWallet 2019-08-02 15:56 評論0 收藏0
推薦輕量高效無依賴的開源JS插件和庫

摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。在這里維持一個持續更新的地方圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

lushan 2019-08-30 13:09 評論0 收藏0
推薦輕量高效無依賴的開源JS插件和庫

摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。在這里維持一個持續更新的地方圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

shuibo 2019-08-22 10:44 評論0 收藏0