JS制作适用于手机和电脑的通知信息效果

今天项目基本都提测完了，所有利用空闲时间，写两篇文章。上一篇《如何搭建node工程》想必大家有需要学习的都已经看过了。这篇文章最后展示出来的效果确实很棒，所以在这里，想记录下来，以后自己也可以看看。
还是和以前一样的套路，咱们一步一步讲，这样看的思路很明了。

先看一下效果吧：

注意右下角，出现的弹出消息，我们实现的就是这样的效果。

效果看完了，接下来就进入分布讲解模式了………..

第一步：先写一个架子

接下来的代码都是在script标签里面写的，大家只要关心script标签里面的内容即可：

  <!DOCTYPE html>
  <html>
  <head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta content="eric.wu" name="author">
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta property="qc:admins" />
    <meta content="telephone=no, address=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>消息推送实例</title>
  </head>
  <body>
     查看右下角，的消息通知..........
  </body>
  </html>
  <script type="text/javascript">

  </script>

第二步：判断浏览器是否支持Web Notifications API

在这里判断是否支持Web Notifications API，只有支持这个东西，我们才能继续下来de 东西。

   function justify_notifyAPI(){
      if (window.Notification) {
        // 支持
        console.log("支持"+"Web Notifications API");
      } else {
        // 不支持
        console.log("不支持"+"Web Notifications API");
      }
    }

第三步：判断浏览器是否支持弹出实例

这里是一个弹框，判断浏览器是否支持弹出实例（图片地址换成你自己的地址即可）

function justify_showMess(){
  if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
      if (status === "granted") {
        var n = new Notification('收到信息:-O', {
          body: '这里是通知内容！你想看什么客官？',
          icon:"../../images/headerPic/QQ图片20160525234650.jpg"
        });
      } else{
        var n = new Notification("baby! i will leave you!");
      }

    });
  }
}

第四步：实例展示弹出的内容

Notification构造函数的title属性是必须的，用来指定通知的标题，格式为字符串。options属性是可选的，格式为一个对象，用来设定各种设置。该对象的属性如下：

dir：文字方向，可能的值为auto、ltr（从左到右）和rtl（从右到左），一般是继承浏览器的设置。

lang：使用的语种，比如en-US、zh-CN。

body：通知内容，格式为字符串，用来进一步说明通知的目的。

tag：通知的ID，格式为字符串。一组相同tag的通知，不会同时显示，只会在用户关闭前一个通知后，在原位置显示。

icon：图表的URL，用来显示在通知上。

  function otification_construct(){

  var notification = new Notification('收到新邮件', {
    body: '您有1封来自雪静的未读邮件。',
    dir: "auto",
    lang:"zh-CN",
    tag: "a1",
    icon:"../../images/headerPic/772513932673948130.jpg"
  });
  console.log(notification.title); // "收到新邮件"
  console.log(notification.body); // "您总共有3封未读邮件。"
}

第五步：Notifications API的相关事件

Notification实例会触发以下三种事件：
show：通知显示给用户时触发。

click：用户点击通知时触发。

close：用户关闭通知时触发。

error：通知出错时触发（通知无法正确显示时出现）。

这些事件有对应的onshow、onclick、onclose、onerror方法，用来指定相应的回调函数。addEventListener方法也可以用来为这些事件指定回调函数。

function otification_event(){

  var MM = new Notification("Hi! My beautiful little princess！",{
    body: '您有1封来外太空的邮件。',
    icon:"../../images/headerPic/20100114212301-1126264202.jpg"
  });

  MM.onshow = function() {
    console.log('Notification showning!');
  };
  MM.onclick = function() {
    console.log('Notification have be click!');
  };
  MM.onerror = function() {
    console.log('Notification have be click!');
    // 手动关闭
    MM.close();
  };

}

这里基本功能已经讲解完毕，这里附上上面效果的Demo源码：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8">
  <meta content="" name="description">
  <meta content="" name="keywords">
  <meta content="eric.wu" name="author">
  <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
  <meta property="qc:admins" />
  <meta content="telephone=no, address=no" name="format-detection">
  <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <title>Web Notifications API</title>
</head>
<body>
 查看右下角，的消息通知..........
</body>
</html>
<script type="text/javascript">

  window.onload= function(){

    justify_notifyAPI();   //判断浏览器是否支持 Web Notifications API
    justify_showMess();   //浏览器是否支持弹出实例
    otification_construct(); //实例展示弹出的内容
    otification_event();   //Notifications API的相关事件 

  }

  //判断浏览器是否支持 Web Notifications API
  function justify_notifyAPI(){
    if (window.Notification) {
      // 支持
      console.log("支持"+"Web Notifications API");
    } else {
      // 不支持
      console.log("不支持"+"Web Notifications API");
    }
  }

  //浏览器是否支持弹出实例
  function justify_showMess(){

    if(window.Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function(status) {
        if (status === "granted") {
          var n = new Notification('收到信息:-O', {
            body: '这里是通知内容！你想看什么客官？',
            icon:"../../images/headerPic/QQ图片20160525234650.jpg"
          });
          // alert("Hi! this is the notifyMessages!");
        } else{
          var n = new Notification("baby! i will leave you!");
        }

      });
    }
  }

  // 实例展示弹出的内容
  function otification_construct(){

    var notification = new Notification('收到新邮件', {
      body: '您有1封来自雪静的未读邮件。',
      dir: "auto",
      lang:"zh-CN",
      tag: "a1",
      icon:"../../images/headerPic/772513932673948130.jpg"
    });
    console.log(notification.title); // "收到新邮件"
    console.log(notification.body); // "您总共有3封未读邮件。"
  }

  //Notifications API的相关事件
  function otification_event(){

    var MM = new Notification("Hi! My beautiful little princess！",{
      body: '您有1封来外太空的邮件。',
      icon:"../../images/headerPic/20100114212301-1126264202.jpg"
    });

    MM.onshow = function() {
      console.log('Notification showning!');
    };
    MM.onclick = function() {
      console.log('Notification have be click!');
    };
    MM.onerror = function() {
      console.log('Notification have be click!');
      // 手动关闭
      MM.close();
    };
  }

</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • NodeJS实现阿里大鱼短信通知发送

    1.说明 阿里大鱼提供了验证码,短信通知,语音等服务,在使用后感觉挺方便,不愧是阿里旗下的产品. 最近想搞个NodeJS发送短信通知的功能,这里没有使用 alidayu-node (开始做的时候并不知道有这个.如果使用alidayu-node那就简单了.),自己整一个签名sign,实现短信发送. 官方的 文档 说明了签名 sign 的生成步骤,不过第三步骤: 3.连接字符串 连接参数名与参数值,并在首尾加上secret 有错误( 首尾加上secret 是错的) 2.代码实现 生成 sign /*

  • 详解JavaScript的Polymer框架中的通知交互

    详解JavaScript的Polymer框架中的通知交互

    Polymer 以访问器属性的形式来定义有监听需求的属性(没有监听需求的属性依然是普通的属性形式定义).模板中还可以采用「::」语法来将属性双向同步于目标元素的某个事件,这就是 Angular 中双向绑定的概念,甚至还要比它更纯粹.更贴近原理. 在 properties 中定义的属性如果没有添加 notify 并且没在模板中用到,那么它就是没有监听需求的,于是就会被定义成普通属性.否则都会被定义成访问器属性,下面例子就解释了这个问题 运行 <script> var Polymer = { do

  • Android监听手机电话状态与发送邮件通知来电号码的方法(基于PhoneStateListene实现)

    本文实例讲述了Android监听手机电话状态与发送邮件通知来电号码的方法.分享给大家供大家参考,具体如下: 在android中可以用PhoneStateListener来聆听手机电话状态(比如待机.通话中.响铃等).本例是通过它来监听手机电话状态,当手机来电时,通过邮件将来电号码发送到用户邮箱的例子.具体程序如下: import android.app.Activity; import android.content.Intent; import android.os.Bundle; impor

  • JavaScript编写Chrome扩展实现与浏览器的交互及时间通知

    JavaScript编写Chrome扩展实现与浏览器的交互及时间通知

    和浏览器的交互 1.书签 使用chrome.bookmarks模块来创建.组织和管理书签.也可参看 Override Pages,来创建一个可定制的书签管理器页面. 1.1.manifest.json 中配置 { "name": "My extension", ... "permissions": [ "bookmarks" ], ... } 对象和属性: 签是按照树状结构组织的,每个节点都是一个书签或者一组节点(每个书签夹可

  • javascript实现下班倒计时效果的方法(可桌面通知)

    javascript实现下班倒计时效果的方法(可桌面通知)

    本文实例讲述了javascript实现下班倒计时效果的方法.分享给大家供大家参考.具体如下: 周末了,搞个下班倒计时,娱乐下. 确保下面三点: 1.非IE浏览器,较高Chrome版本,已开启HTML5桌面通知.具体设置见下面截图 2.将这个HTML放到本地Web服务器上测试,直接双击运行无法弹出桌面通知 顺带提下,这个程序很容易扩展成定时通知. 做这个东西的过程有两点比较纠结,总结下: 1.parseInt("09")返回的是0.正确做法是parseInt("09"

  • JS制作适用于手机和电脑的通知信息效果

    JS制作适用于手机和电脑的通知信息效果

    今天项目基本都提测完了,所有利用空闲时间,写两篇文章.上一篇<如何搭建node工程>想必大家有需要学习的都已经看过了.这篇文章最后展示出来的效果确实很棒,所以在这里,想记录下来,以后自己也可以看看. 还是和以前一样的套路,咱们一步一步讲,这样看的思路很明了. 先看一下效果吧: 注意右下角,出现的弹出消息,我们实现的就是这样的效果. 效果看完了,接下来就进入分布讲解模式了---.. 第一步:先写一个架子 接下来的代码都是在script标签里面写的,大家只要关心script标签里面的内容即可: &

  • JS非Alert实现网页右下角“未读信息”效果弹窗

    JS非Alert实现网页右下角“未读信息”效果弹窗

    本文实例讲述了JS非Alert实现网页右下角"未读信息"效果弹窗.分享给大家供大家参考.具体如下: 这是一款网页右下角的弹窗代码,运用Div+Js技术共同打造,非Alert函数那种,仿腾讯新闻的网页右下角弹窗代码,源代码作者为了让新手有一个易懂易学的好范例,在代码中加入了丰富的注释,为新手学习和使用提供了极大的便利. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-alert-right-buttom-dlg-demo/ 具体

  • js制作xml在线编辑器实例

    js制作xml在线编辑器实例

    目录 前言 在线XML编辑器的需求 技术预研 可视化编程 VSCODE插件 在线编辑器 最初形态:简单的在线XML编辑器 用CodeMirror做编辑器 学习XML,并提取出tags规则 进化形态:加载树形文件结构和全文件校验功能的在线XML编辑器 左侧文件树 全文件校验功能 非递归遍历树 IndexDB保存文件内容 究极进化形态:突破浏览器沙盒限制,实现对电脑本地文件的增删改 更多的功能与细节 不足与总结 前言 一年多没更新博客了,原因是疫情期间<骑马与砍杀2>发售,然后去写游戏MOD去了.

  • 原生JS实现网页手机音乐播放器 歌词同步播放的示例

    整了一下  之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪 //获取歌词文本 var txt = document.getElementById("lrc"); var lrc = txt.value;//获取文本域里的值 /*console.log(lrc);*/ var lrcArr = lrc.split("[");//去除[ /*console.log(lrcArr);*/ var html = "";//定义一个

  • Python手机与电脑游戏脚本的编写方法

    Python手机与电脑游戏脚本的编写方法

    目录 前言 分析(x0) 分析(x1) 那么如何去确定这个像素范围呢? 那么如何去判断出哪个块是黑块呢? 视频教程 源代码 关于pyautogui的安装 1.下载后安装 2.检测安装是否成功 前言 大家好,我叫善念.我发现我的粉丝量涨的很慢,这次厚脸皮要波关注.这次做的是一个小巧的游戏脚本,本质上它可以用于任意的电脑与手机游戏. 分析(x0) 这个游戏是4399上的"别猜百块儿", 意思就是让咱们只踩黑块,然后会给我们弹一手音乐. 我们来看看经典模式,选择pro,虽然我也不知道各种模式

  • 基于JS制作一个简单的网页版地图

    基于JS制作一个简单的网页版地图

    目录 前言 一.申请地图的AK密钥 二.主要代码分析 三.全部代码 四.结果展示 前言 以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜索时,或者经纬度查询城市时,该小控件也能自由地切换到目标城市. 一.申请地图的AK密钥 1.首先找到一个地图开放平台,这里以百度地图开放平台为例,步骤如下:进入百度地图开放平台,拉到最底下,进行登录注册,然后进入应用管

  • 使用impress.js制作幻灯片

    上周看到一个朋友做了很炫的缩放式幻灯片,可能因为对此知识了解的不多,找了好久才找到几个web幻灯片工具.通过筛选决定用Geek的 impress.js . impress.js是一款新兴的幻灯工具,它的效果类似Prezi,但是拥有3D的功能,而且是在MIT&GPL协议下开源,对于有一定的Web开发基础的人而言,真是一个福音!只需要简单的用一些html指令,并加载impress.js就可以制作出一个很绚丽的缩放式幻灯. 制作时首先你需要写一些head,这和普通的Web是一样的,但body不同.由于

  • JS制作手机端自适应缩放显示

    JS制作手机端自适应缩放显示 示例一: <script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigator.userAgent.toLowerCase(); var result = /android (\d+\.\d+)/.exec(ua); if (result){ var version = parseFloat(result[1]); if(version>

  • js实现适用于素材网站的黑色多级菜单导航条效果

    js实现适用于素材网站的黑色多级菜单导航条效果

    本文实例讲述了js实现适用于素材网站的黑色多级菜单导航条效果.分享给大家供大家参考.具体如下: 这是一款适用于素材网站的黑色多级菜单导航条,无需jQuery,采用CSS+javaScript来实现,整体效果非常棒,用来学习CSS也是很不错的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-color-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X

  • js制作网站首页图片轮播特效代码

    本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative;

随机推荐