首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

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

- Author -

马优晨

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 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
LOGO(1) most_common(1) pip(1) 抖音(1) 并发(8) 字典(3) Xpath(1) Counter(1) MIME(1) 爬虫(2)
You might like
浅析php工厂模式
2014/11/25 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
JavaScript仿微信（电话）联系人列表滑动字母索引实例讲解（推荐）
2017/08/16 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
Node.js系列之连接DB的方法（3）
2019/08/30 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
对python 多个分隔符split 的实例详解
2018/12/20 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
python输出数学符号实例
2020/05/11 Python
详解Python流程控制语句
2020/10/28 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
医学生自荐信
2013/12/03 职场文书
售后求职信范文
2014/03/15 职场文书
开学典礼策划方案
2014/05/28 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python