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 相关文章推荐
jquery.validate使用攻略 第三部
Jul 01 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
详解微信小程序中组件通讯
Oct 30 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
微信小程序用户授权最佳实践指南
May 08 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
第九节 绑定 [9]
2006/10/09 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
Python 的内置字符串方法小结
2016/03/15 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
树莓派实现移动拍照
2019/06/22 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
Java模拟试题
2014/11/10 面试题
生态学毕业生自荐信
2013/10/27 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
户籍证明模板
2014/09/28 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
团代会邀请函
2015/02/02 职场文书
广告业务员岗位职责
2015/02/13 职场文书
道歉的话怎么说
2015/05/12 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
Vue全家桶入门基础教程
2021/05/14 Vue.js