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

fantix 發(fā)布于2019-08-22 18:44 / 1607人閱讀

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

JS 實(shí)現(xiàn)瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統(tǒng)彈出通知。它沒有依賴，壓縮只有只有4.66kb(gzipped: 1.70kb)，demo 實(shí)例預(yù)覽。

下載

# v2.x
$ npm install @wcjiang/notify --save
# v1.x 
$ npm install title-notify --save

使用

import Notify from "@wcjiang/notify";

const notify = new Notify({
  message: "有消息了。", // 標(biāo)題
  effect: "flash", // flash | scroll 閃爍還是滾動
  openurl:"https://github.com/jaywcjlove/iNotify", // 點(diǎn)擊彈窗打開連接地址
  onclick: () => { // 點(diǎn)擊彈出的窗之行事件
    console.log("---")
  },
  // 可選播放聲音
  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:"您來了一條新消息", // 設(shè)置消息內(nèi)容
  }
});

notify.player();

在您的HTML中手動下載并引入 notify.js，你也可以通過 UNPKG 進(jìn)行下載：

option

message: String 標(biāo)題

effect: String, flash | scroll | favicon 閃爍還是滾動

audio: 可選播放聲音

file: String/Array 可以使用數(shù)組傳多種格式的聲音文件

interval: Number 標(biāo)題閃爍，或者滾動速度

openurl: String 點(diǎn)擊彈窗打開連接地址

onclick: Function 彈窗點(diǎn)擊事件

updateFavicon: 設(shè)置 Favicon 圖標(biāo)顏色

textColor: 設(shè)置 favicon 字體顏色

backgroundColor: 背景顏色，設(shè)置背景顏色透明，將值設(shè)置為 transparent

notification: 可選chrome瀏覽器通知，默認(rèn)不填寫就是下面的內(nèi)容

title: 默認(rèn)值 通知！

icon: 設(shè)置圖標(biāo) icon 默認(rèn)為 Favicon

body: 設(shè)置消息內(nèi)容

isPermission

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

iNotify.isPermission()

聲音設(shè)置 player

播放聲音

iNotify.player()

loopPlay

自動播放聲音

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)題閃爍動畫，初始化之后需要調(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è)置時(shí)間間隔

iNotify.setInterval(2000)

addTimer

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

iNotify.addTimer()

clearTimer

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

iNotify.clearTimer()

favicon通知 setFavicon

設(shè)置 icon 顯示數(shù)字或者文本

iNotify.setFavicon(10)

setFaviconColor

設(shè)置 icon 顯示文本顏色

iNotify.setFaviconColor("#0043ff")

setFaviconBackgroundColor

設(shè)置 icon 顯示文本顏色

iNotify.setFaviconBackgroundColor("#0043ff")
// 設(shè)置字體和背景顏色
iNotify.setFaviconColor("#f5ff00").setFaviconBackgroundColor("red");

faviconClear

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

iNotify.faviconClear()

chrome通知 notify

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

iNotify.notify(); 
iNotify.notify({
  title: "新通知",
  body: "打雷啦，下雨啦...",
  openurl: "http://www.bing.com",
  onclick: function() {
    console.log("on click")
  },
  onshow: function() {
    console.log("on show")
  },
});

title 一定會被顯示的通知標(biāo)題。

dir 文字的方向；它的值可以是 auto（自動）, ltr（從左到右）, or rtl（從右到左）。

icon 一個(gè)圖片的URL，將被用于顯示通知的圖標(biāo)。

body 通知中額外顯示的字符串。

openurl 點(diǎn)擊打開指定 URL。

onclick 每當(dāng)用戶點(diǎn)擊通知時(shí)被觸發(fā)。

onshow 當(dāng)通知顯示的時(shí)候被觸發(fā)。

onerror 每當(dāng)通知遇到錯(cuò)誤時(shí)被觸發(fā)。

onclose 當(dāng)用戶關(guān)閉通知時(shí)被觸發(fā)。

其它

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

例子 實(shí)例一

function iconNotify(num){
  if(!notify) {
    var notify = new Notify({
      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 Notify({
  effect: "flash",
  interval: 500,
});
notify.setFavicon("1");

實(shí)例三

var iN = new Notify({
  effect: "flash",
  interval: 500,
  message: "有消息拉！",
  updateFavicon:{ // 可選，默認(rèn)綠底白字
    textColor: "#fff",// favicon 字體顏色
    backgroundColor: "#2F9A00", // 背景顏色
  }
}).setFavicon(10);

實(shí)例四

var iN = new Notify().setFavicon(5);

實(shí)例五

var iN = new Notify({
  effect: "flash",
  interval: 500,
  message: "有消息拉！",
  audio:{
    file: "msg.mp4",
  }
}).setFavicon(10).player();

實(shí)例五

var iN = new Notify({
  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: "打雷啦，下雨啦..."
});

實(shí)例六

var iN =  new Notify({
  effect: "flash",
  interval: 500,
  message: "有消息拉！",
  audio:{
    file: ["msg.mp4", "msg.mp3", "msg.wav"]
  },
  notification:{
    title: "通知！",
    body:"您來了一條新消息"
  }
})


iN.setFavicon(10).player();

var n = new Notify()
n.init({
  effect: "flash",
  interval: 500,
  message: "有消息拉！",
  audio:{
    file: ["openSub.mp4", "openSub.mp3", "openSub.wav"],
  },
  notification:{
    title:"通知！",
    icon: "",
    body:"您來了一個(gè)客戶",
  }
})

n.setFavicon(10).player();

License

MIT ? Kenny Wong