首页
所有分类
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之二（两种扩展）
Jun 11 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 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
Android Gradle(1) Tablespace(1) V Rising(1) procedure(1) 内置函数(1) 自定义函数(1) commit(1) maven(2) Navicat(1) 记事本(1)
You might like
PHP 时间日期操作实战
2011/08/26 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
jQuery的一些注意
2006/12/06 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue写h5页面的方法总结
2019/02/12 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
基于python实现查询ip地址来源
2020/06/02 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
SmartBuyGlasses美国官网：太阳眼镜和眼镜
2017/08/20 全球购物
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
政审证明材料
2015/06/19 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
python实现局部图像放大
2021/11/17 Python
redis lua限流算法实现示例
2022/07/15 Redis
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers