成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

SillyMonkey / 2188人閱讀

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

通知

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

Demo 先start

這是重復(fù)造輪子...，標(biāo)題閃爍、或者滾動(dòng)提示，favicon數(shù)字顯示。打開(kāi)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()
//推薦下面寫(xiě)法
var iNotify = new iNotify({
    message: "有消息了。",//標(biāo)題
    effect: "flash", // flash | scroll 閃爍還是滾動(dòng)
    //可選播放聲音
    audio:{
        //可以使用數(shù)組傳多種格式的聲音文件
        file: ["msg.mp4","msg.mp3","msg.wav"]
        //下面也是可以的哦
        //file: "msg.mp4"
    },
    //標(biāo)題閃爍，或者滾動(dòng)速度
    interval: 1000,
    //可選，默認(rèn)綠底白字的  Favicon
    updateFavicon:{
        // favicon 字體顏色
        textColor: "#fff",
        //背景顏色，設(shè)置背景顏色透明，將值設(shè)置為“transparent”
        backgroundColor: "#2F9A00" 
    },
    //可選chrome瀏覽器通知，默認(rèn)不填寫(xiě)就是下面的內(nèi)容
    notification:{
        title:"通知！",//設(shè)置標(biāo)題
        icon:"",//設(shè)置圖標(biāo) icon 默認(rèn)為 Favicon
        body:"您來(lái)了一條新消息"http://設(shè)置消息內(nèi)容
    }
})
isPermission

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

iNotify.isPermission()
聲音設(shè)置 player

播放聲音

iNotify.player()
loopPlay

自動(dòng)播放聲音

iNotify.loopPlay()
stopPlay

停止播放聲音

iNotify.stopPlay()
setURL

設(shè)置播放聲音URL

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

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

setTitle

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

iNotify.setTitle(true)//播放動(dòng)畫(huà)
iNotify.setTitle("新標(biāo)題")//閃爍新標(biāo)題
iNotify.setTitle()//清除閃爍 顯示原來(lái)的標(biāo)題
setInterval

設(shè)置時(shí)間間隔

iNotify.setInterval(2000)
addTimer

添加計(jì)數(shù)器

iNotify.addTimer()
clearTimer

清除計(jì)數(shù)器

iNotify.clearTimer()
favicon通知 setFavicon

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

iNotify.setFavicon(10)
faviconClear

清除數(shù)字顯示原來(lái)的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
});
實(shí)例一 
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("有新消息！");
    }
}
實(shí)例二 
var notify = new iNotify().init({
    effect: "flash",
    interval: 500
});
notify.setFavicon("1")
實(shí)例三 
var iN = new iNotify().init({
    effect: "flash",
    interval: 500,
    message:"有消息拉！",
    updateFavicon:{//可選，默認(rèn)綠底白字
        textColor: "#fff",// favicon 字體顏色
        backgroundColor: "#2F9A00" //背景顏色
    }
}).setFavicon(10);
實(shí)例四 
var iN = new iNotify().init().setFavicon(5);
實(shí)例五 
var iN = new iNotify().init({
    effect: "flash",
    interval: 500,
    message:"有消息拉！",
    audio:{
        file: "msg.mp4"
    }
}).setFavicon(10).player();
實(shí)例五 
var iN = new iNotify().init({
    effect: "flash",
    interval: 500,
    message:"有消息拉！",
    audio:{
        file: "msg.mp4"http://可以使用數(shù)組傳多種格式的聲音文件
    },
    notification:{
        title:"通知！",
        icon:"",
        body:"您來(lái)了一條新消息"
    }
}).setFavicon(10).player();

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

iN.notify({
    title:"新通知",
    body:"打雷啦，下雨啦..."
});
實(shí)例六 
var iN =  new iNotify({
    effect: "flash",
    interval: 500,
    message:"有消息拉！",
    audio:{
        file: ["msg.mp4","msg.mp3","msg.wav"]
    },
    notification:{
        title:"通知！",
        body:"您來(lái)了一條新消息"
    }
})


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:"您來(lái)了一個(gè)客戶"
    }
})

n.setFavicon(10).player();

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/85665.html

相關(guān)文章

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

    摘要：實(shí)現(xiàn)瀏覽器的閃爍滾動(dòng)聲音提示等系統(tǒng)彈出通知。它沒(méi)有依賴(lài)，壓縮只有只有，實(shí)例預(yù)覽。下載使用有消息了。文字的方向它的值可以是自動(dòng)從左到右從右到左。一個(gè)圖片的，將被用于顯示通知的圖標(biāo)。當(dāng)用戶關(guān)閉通知時(shí)被觸發(fā)。 JS 實(shí)現(xiàn)瀏覽器的 title 閃爍、滾動(dòng)、聲音提示、chrome、Firefox、Safari等系統(tǒng)彈出通知。它沒(méi)有依賴(lài)，壓縮只有只有4.66kb(gzipped: 1.70kb)，...

    fantix 評(píng)論0 收藏0

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

    摘要：消息提示無(wú)非三種方式聲音提示，桌面彈窗和閃爍提醒。聲音提示注意聲音提示前提示已經(jīng)加載了聲音文件，有文章寫(xiě)的很多是臨時(shí)一個(gè)對(duì)象，然后這樣做是非常不好的，因?yàn)槟忝看握{(diào)用聲音的時(shí)候都會(huì)去后臺(tái)請(qǐng)求一下這個(gè)聲音文件。所以先加載出來(lái)是最好的方法。 web消息提示無(wú)非三種方式：聲音提示，桌面彈窗和title閃爍提醒。下面做一一介紹。 聲音提示 注意聲音提示前提示已經(jīng)加載了聲音文件，有文章寫(xiě)的很多是臨...

    Soarkey 評(píng)論0 收藏0

  • 推薦輕量高效無(wú)依賴(lài)的開(kāi)源JS插件和庫(kù)

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

    AlphaWallet 評(píng)論0 收藏0

  • 推薦輕量高效無(wú)依賴(lài)的開(kāi)源JS插件和庫(kù)

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

    lushan 評(píng)論0 收藏0

  • 推薦輕量高效無(wú)依賴(lài)的開(kāi)源JS插件和庫(kù)

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

    shuibo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<