zoukankan      html  css  js  c++  java
  • JS 实现的浏览器系统通知 iNotify.js

    注:本分非原创;信息来源 oschina

    授权协议:MIT

    开发语言:JavaScript

    操作系统:跨平台

    软件作者:同一种调调

    iNotify.js 详细介绍

    JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。

    image

    下载

      1 $ npm install title-notify --save-dev
      2 $ bower install inotify --save-dev

     

    编译

      1 # 下载依赖工具
      2 $ npm install
      3 # 压缩inotify
      4 $ npm build

    init

    effect: flash | scroll | favicon

      1 var iNotify = new iNotify().init()
      2 //推荐下面写法
      3 var iNotify = new iNotify({
      4     message: '有消息了。',//标题
      5     effect: 'flash', // flash | scroll 闪烁还是滚动
      6     openurl:"http://www.bing.com", // 点击弹窗打开连接地址
      7     onclick:function(){ //点击弹出的窗之行事件
      8        console.log("---")
      9     },
     10     //可选播放声音
     11     audio:{
     12         //可以使用数组传多种格式的声音文件
     13         file: ['msg.mp4','msg.mp3','msg.wav']
     14         //下面也是可以的哦
     15         //file: 'msg.mp4'
     16     },
     17     //标题闪烁,或者滚动速度
     18     interval: 1000,
     19     //可选,默认绿底白字的  Favicon
     20     updateFavicon:{
     21         // favicon 字体颜色
     22         textColor: "#fff",
     23         //背景颜色,设置背景颜色透明,将值设置为“transparent”
     24         backgroundColor: "#2F9A00"
     25     },
     26     //可选chrome浏览器通知,默认不填写就是下面的内容
     27     notification:{
     28         title:"通知!",//设置标题
     29         icon:"",//设置图标 icon 默认为 Favicon
     30         body:'您来了一条新消息'//设置消息内容
     31     }
     32 })

    isPermission

    判断浏览器弹框通知是否被阻止。

      1 iNotify.isPermission()

    声音设置

    player

    播放声音

      1 iNotify.player()

    loopPlay

    自动播放声音

      1 iNotify.loopPlay()

    stopPlay

    停止播放声音

      1 iNotify.stopPlay()

    setURL

    设置播放声音URL

     
      1 iNotify.setURL('msg.mp3')// 设置一个
      2 iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 设置多个

    title通知

      1 最新的版本默认不播放标题闪烁动画,初始化之后需要调用 setTitle(true) 方法才播放标题动画。

    setTitle

    设置标题,

      1 iNotify.setTitle(true)//播放动画
      2 iNotify.setTitle('新标题')//闪烁新标题
      3 iNotify.setTitle()//清除闪烁 显示原来的标题

    setInterval

    设置时间间隔

      1 iNotify.setInterval(2000)

    addTimer

    添加计数器

      1 iNotify.addTimer()

    clearTimer

    清除计数器

      1 
      2 iNotify.clearTimer()
      3 

    favicon通知

    setFavicon

    设置icon 显示数字

      1 
      2 iNotify.setFavicon(10)
      3 

    faviconClear

      1 清除数字显示原来的icon
      2 iNotify.faviconClear()
      3 

    chrome通知

    notify

      1 弹出chrome通知,不传参数为预设值...
      2 iNotify.notify();
      3 iNotify.notify({
      4     title:"新通知",
      5     body:"打雷啦,下雨啦...",
      6     openurl:"http://www.bing.com",
      7     onclick:function(){
      8        console.log("---")
      9     }
     10 });
     11 

    其它

      1 iNotify.init().title; 获取标题

    例子

      1 new iNotify({
      2     effect: 'flash',
      3     interval: 500
      4 })
      5 
      6 上面的例子跟下面的是一样的
      7 new iNotify().init({
      8     effect: 'flash',
      9     interval: 500
     10 });
     11 

    实例一

      1 function iconNotify(num){
      2     if(!notify) {
      3         var notify = new iNotify().init({
      4             effect: 'flash',
      5             interval: 500
      6         });
      7     }
      8     if(num===0){
      9         notify.faviconClear()
     10         notify.setTitle();
     11     }else if(num<100){
     12         notify.setFavicon(num)
     13         notify.setTitle("有新消息!");
     14     }else if(num>99){
     15         notify.setFavicon('..')
     16         notify.setTitle("有新消息!");
     17     }
     18 }

    实例二

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

    实例三

      1 var iN = new iNotify().init({
      2     effect: 'flash',
      3     interval: 500,
      4     message:"有消息拉!",
      5     updateFavicon:{//可选,默认绿底白字
      6         textColor: "#fff",// favicon 字体颜色
      7         backgroundColor: "#2F9A00" //背景颜色
      8     }
      9 }).setFavicon(10);

    实例四

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

    实例五

      1 var iN = new iNotify().init({
      2     effect: 'flash',
      3     interval: 500,
      4     message:"有消息拉!",
      5     audio:{
      6         file: 'msg.mp4'
      7     }
      8 }).setFavicon(10).player();

    实例五

      1 var iN = new iNotify().init({
      2     effect: 'flash',
      3     interval: 500,
      4     message:"有消息拉!",
      5     audio:{
      6         file: 'msg.mp4'//可以使用数组传多种格式的声音文件
      7     },
      8     notification:{
      9         title:"通知!",
     10         icon:"",
     11         body:'您来了一条新消息'
     12     }
     13 }).setFavicon(10).player();
     14 
     15 //弹出chrome通知,不传参数为预设值...
     16 iN.notify();
     17 
     18 iN.notify({
     19     title:"新通知",
     20     body:"打雷啦,下雨啦..."
     21 });

    实例六

      1 var iN =  new iNotify({
      2     effect: 'flash',
      3     interval: 500,
      4     message:"有消息拉!",
      5     audio:{
      6         file: ['msg.mp4','msg.mp3','msg.wav']
      7     },
      8     notification:{
      9         title:"通知!",
     10         body:'您来了一条新消息'
     11     }
     12 })
     13 
     14 
     15 iN.setFavicon(10).player();
     16 
     17 var n = new iNotify()
     18 n.init({
     19     effect: 'flash',
     20     interval: 500,
     21     message:"有消息拉!",
     22     audio:{
     23         file: ['openSub.mp4','openSub.mp3','openSub.wav']
     24     },
     25     notification:{
     26         title:"通知!",
     27         icon:"",
     28         body:'您来了一个客户'
     29     }
     30 })
     31 
     32 n.setFavicon(10).player();

           jaywcjlove/iNotify                                                                                                                                                                                                Star 334 | Fork 101                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

    JS 实现浏览器的 title 闪烁、滚动、声音提示、通知,没有依赖。https://github.com/jaywcjlove/iNotify

    最近提交:

    • 40af7d0f2 released v1.0.13                                                                                                                                                                                                            jaywcjlove 2017-03-05 02:55

    • eb5101c97 美化代码 (6)                                                                                                                                                                                                                    Binbin Ma 2017-03-04 23:10

    • 0bbfc4e74 update README.md                                                                                                                                                                                                     jaywcjlove 2016-11-14 17:29


    master分支 代码最近更新:2017-03-05                                                                                                                                                                                                  下载

  • 相关阅读:
    C6678图像处理板卡学习资料第426篇:基于XC7Z100+TMS320C6678的图像处理板卡
    无线通信板卡学习资料第427篇:基于3U VPX XC7Z035+AD9361的无线通信板卡
    硬件加速卡学习资料第1篇:基于Xilinx XCKU115的半高PCIe x8 硬件加速卡 FPGA硬件加速
    硬件加速卡学习资料第1篇:基于Xilinx XCKU115的半高PCIe x8 硬件加速卡 FPGA硬件加速
    PCIe 加速计算卡学习资料第420篇:基于ZU19EG的4路100G光纤的PCIe 加速计算卡
    GPU计算主板学习资料第735篇:基于3U VPX的AGX Xavier GPU计算主板 信号计算主板 视频处理 相机信号
    [个人翻译]GitHub指导文件(GitHub Guides[Hello World])
    关于“如何只用2GB内存从20亿,40亿,80亿个整数中找到出现次数最多的数?”的一种思路
    [RabbitMQ]Windows环境下rabbitmqclt(Command Line Tools)出现Erlang distribution failed错误的解决方法
    Visual Studio无法推送提交到Github的解决方法
  • 原文地址:https://www.cnblogs.com/ios9/p/7442404.html
Copyright © 2011-2022 走看看