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


Posted in Javascript onOctober 28, 2016

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

先看一下效果吧:

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

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

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

第一步:先写一个架子

接下来的代码都是在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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
java必学必会之static关键字
Dec 03 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
js实现滑动进度条效果
Aug 21 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 #Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 #Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 #Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 #Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 #Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 #Javascript
Javascript+CSS3实现进度条效果
Oct 28 #Javascript
You might like
php抓取https的内容的代码
2010/04/06 PHP
php二维数组转成字符串示例
2014/02/17 PHP
php常用数学函数汇总
2014/11/21 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
JS中递归函数
2016/06/17 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
Python简单的制作图片验证码实例
2017/05/31 Python
解决Python二维数组赋值问题
2019/11/28 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
如何表示python中的相对路径
2020/07/08 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
材料化学应届生求职信
2013/10/09 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
大连星海广场导游词
2015/02/10 职场文书
休学证明范本
2015/06/19 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
如何做好员工培训计划?
2019/07/09 职场文书