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 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
javascript利用键盘控制小方块的移动
Apr 20 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中heredoc的使用方法
2013/06/17 PHP
php对象工厂类完整示例
2018/08/09 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python 的AES加密与解密实现
2019/07/09 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
小学家长学校培训材料
2014/08/24 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
小平您好观后感
2015/06/09 职场文书
排球赛新闻稿
2015/07/17 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
在redisCluster中模糊获取key方式
2021/07/09 Redis