JS實現(xiàn)瀏覽器的title閃爍、滾動、聲音提示、通知

SillyMonkey 發(fā)布于2019-08-21 10:30 / 2158人閱讀

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

通知

JS 實現(xiàn)瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統(tǒng)通知。

Demo 先start

這是重復(fù)造輪子...，標(biāo)題閃爍、或者滾動提示，favicon數(shù)字顯示。打開chrome瀏覽器調(diào)試工具，按照下面截圖的方式放到調(diào)試?yán)锩嬲{(diào)用一下，你就可以看到效果了。

下載 npm

$ npm install title-notify

bower

$ bower install inotify

init

effect: flash | scroll | favicon

var iNotify = new iNotify().init()
//推薦下面寫法
var iNotify = new iNotify({
    message: "有消息了。",//標(biāo)題
    effect: "flash", // flash | scroll 閃爍還是滾動
    //可選播放聲音
    audio:{
        //可以使用數(shù)組傳多種格式的聲音文件
        file: ["msg.mp4","msg.mp3","msg.wav"]
        //下面也是可以的哦
        //file: "msg.mp4"
    },
    //標(biāo)題閃爍，或者滾動速度
    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:"您來了一條新消息"http://設(shè)置消息內(nèi)容
    }
})

isPermission

判斷瀏覽器彈框通知是否被阻止。

iNotify.isPermission()

聲音設(shè)置 player

播放聲音

iNotify.player()

loopPlay

自動播放聲音

iNotify.loopPlay()

stopPlay

停止播放聲音

iNotify.stopPlay()

setURL

設(shè)置播放聲音URL

iNotify.setURL("msg.mp3")// 設(shè)置一個
iNotify.setURL(["msg.mp3","msg.ogg","msg.mp4"]) // 設(shè)置多個

title通知

最新的版本默認(rèn)不播放標(biāo)題閃爍動畫，初始化之后需要調(diào)用 setTitle(true) 方法才播放標(biāo)題動畫。

setTitle

設(shè)置標(biāo)題，

iNotify.setTitle(true)//播放動畫
iNotify.setTitle("新標(biāo)題")//閃爍新標(biāo)題
iNotify.setTitle()//清除閃爍 顯示原來的標(biāo)題

setInterval

設(shè)置時間間隔

iNotify.setInterval(2000)

addTimer

添加計數(shù)器

iNotify.addTimer()

clearTimer

清除計數(shù)器

iNotify.clearTimer()

favicon通知 setFavicon

設(shè)置icon 顯示數(shù)字

iNotify.setFavicon(10)

faviconClear

清除數(shù)字顯示原來的icon

iNotify.faviconClear()

chrome通知 notify

彈出chrome通知，不傳參數(shù)為預(yù)設(shè)值...

iNotify.notify(); 
iNotify.notify({
    title:"新通知",
    body:"打雷啦，下雨啦..."
});

其它

iNotify.init().title; 獲取標(biāo)題

例子

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:{//可選，默認(rèn)綠底白字
        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://可以使用數(shù)組傳多種格式的聲音文件
    },
    notification:{
        title:"通知！",
        icon:"",
        body:"您來了一條新消息"
    }
}).setFavicon(10).player();

//彈出chrome通知，不傳參數(shù)為預(yù)設(shè)值...
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();

云服務(wù)器 GPU云服務(wù)器 title閃爍 js實現(xiàn)提示語音 js實現(xiàn)輸入提示 js實現(xiàn)搜索輸入提示

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85665.html

發(fā)表評論

登陸后可評論

0條評論

SillyMonkey

男|高級講師

我要關(guān)注我要私信

TA的文章

前端進(jìn)階（8） - 前端開發(fā)需要了解的工具集合：webpack, eslint, prettier,

閱讀 1901·2019-08-29 16:44
HTML與CSS中的定位個人分享

閱讀 2200·2019-08-29 16:30
Z-index 層疊上下文和層疊水平

閱讀 812·2019-08-29 15:12
使用next.js結(jié)合GITHUB ISSUE實現(xiàn)博客。

閱讀 3550·2019-08-26 10:48
Vue數(shù)據(jù)響應(yīng)式原理筆記就幾行沒啥可看的

閱讀 2684·2019-08-23 18:33
避免CDN引用資源被webpack打包進(jìn)出口bundle.js文件

閱讀 3817·2019-08-23 17:01
scheduler 源碼

閱讀 1967·2019-08-23 15:54
前端路由跳轉(zhuǎn)基本原理

閱讀 1328·2019-08-23 15:05

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS實現(xiàn)瀏覽器的title閃爍、滾動、聲音提示、通知

相關(guān)文章

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

web聊天系統(tǒng)的消息通知問題

推薦輕量高效無依賴的開源JS插件和庫

推薦輕量高效無依賴的開源JS插件和庫

推薦輕量高效無依賴的開源JS插件和庫

發(fā)表評論

0條評論

SillyMonkey

男|高級講師

TA的文章

前端進(jìn)階（8） - 前端開發(fā)需要了解的工具集合：webpack, eslint, prettier,

HTML與CSS中的定位個人分享

Z-index 層疊上下文和層疊水平

使用next.js結(jié)合GITHUB ISSUE實現(xiàn)博客。

Vue數(shù)據(jù)響應(yīng)式原理筆記就幾行沒啥可看的

避免CDN引用資源被webpack打包進(jìn)出口bundle.js文件

scheduler 源碼

前端路由跳轉(zhuǎn)基本原理

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS實現(xiàn)瀏覽器的title閃爍、滾動、聲音提示、通知

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS實現(xiàn)瀏覽器的title閃爍、滾動、聲音提示、通知