JS让通知信息效果适合手机和电脑

今天项目基本测试完毕，就利用空闲时间写了两篇文章。最后一篇《如何搭建node工程》想必大家都看过了。这篇文章最后展示的效果真的很棒，所以我想在这里记录下来，以后自己看。还是和以前一样的套路。我们一步一步来谈。思路很清晰。

我们先来看看效果：

注意右下角弹出的信息。这就是我们所取得的成就。

看完效果，我会进入分布式讲解模式.

第一步：先写一个书架

以下代码写在脚本标记中，因此您只需要关心脚本标记的内容：

！DOCTYPE html html头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=' phone=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查看消息通知..右下角/正文/htmlscript类型=' text/JavaScript'/script步骤2:确定浏览器是否支持Web通知API

这里判断是否支持Web通知API。只有支持这个东西，我们才能继续去做事情。

函数狡辩_ notify API(){ if(window . notification){//支持console.log('支持' ' Web Notifications API ')；} else {//不支持console.log('不支持' ' Web Notifications API ')；}}步骤3:确定浏览器是否支持弹出实例

这里有一个弹出框来判断浏览器是否支持弹出实例(只需将图片地址改为自己的地址即可)

函数狡辩_showMess(){ if(window。通知通知。权限！==“拒绝”){通知。requestpermission(函数(状态){if(状态=='已授予'){var n=新通知('收到消息：-O '，{body: '这里是通知内容！“你想见到什么样的客官？”，图标： '././images/headerpic/QQ图片20160525234650 . jpg ' })；} else { var n=new Notification(' baby！“我会离开你的！”);} });}}

第四步：用例子展示弹出内容

通知构造函数的标题属性是以字符串格式指定通知标题所必需的。Options属性是可选的，并被格式化为对象，用于设置各种设置。该对象的属性如下：

方向：文本方向。可能的值是auto、ltr(从左到右)和rtl(从右到左)，它们通常继承浏览器的设置。

朗：使用的语言，如en-US和zh-CN。

正文：通知内容，格式为字符串，用于进一步解释通知的目的。

标签:通知的标识，字符串格式。具有相同标签的一组通知不会同时显示，而只会在用户关闭前一个通知后显示在原始位置。

图标：要在通知上显示的图表的网址。

function otification _ construct(){ var notification=new notification('收到新邮件'，{body: '您有一封来自薛婧的未读邮件'，dir: 'auto '，lang:'zh-CN '，tag: 'a1 '，icon: '././images/header pic/772513932673948130 . jpg ' })；console . log(notification . title)；//“收到新邮件”console . log(notification . body)；//“您总共有3封未读邮件。”}第5步：与通知API相关的事件

通知实例触发以下三个事件：显示：当通知显示给用户时触发。

Click:当用户单击通知时触发。

关闭：当用户关闭通知时触发。

错误：通知出错时触发(通知无法正确显示时发生)。

这些事件有对应的昂秀、昂立、昂立、昂立、昂立方法，用来指定相应的回调函数添加事件侦听器方法也可以用来为这些事件指定回调函数。

函数otification _ event(){ var MM=new Notification(' Hi！"我美丽的小公主!"，{ body: '您有一封来外太空的邮件图标： '././images/header pic/20100114212301-1126264202。jpg ' })；mm . onshow=function(){ console。日志('通知显示!');};通知已被单击！);};mm . onerror=function(){ console。日志('通知已被单击!');//手动关闭mm . close()；};}这里基本功能已经讲解完毕，这里附上上面效果的演示源码：

！DOCTYPE html html头lang=' en ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8/meta charset=' utf-8 '元内容=' name=' description '元内容=' name=' keywords '元内容=' Eric。Wu ' name=' author ' meta content=' application/XHTML XML；charset=UTF-8 ' http-equiv=' Content-Type '元属性=' QC : admins '/元内容=' phone=no，address=no ' name=' format-detection '元内容=' 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 dy查看右下角，的消息通知../body/html脚本类型=' text/JavaScript '窗口。onload=function(){ 0狡辩_ NotifyAPI()；//判断浏览器是否支持网通知应用程序接口自圆其说_ show mess()；//浏览器是否支持弹出实例otification _ construct()；//实例展示弹出的内容otification _ event()；//通知应用程序接口的相关事件} //判断浏览器是否支持网络通知应用编程接口函数证明_通知应用编程接口(){如果（窗口。通知){ //支持console.log('支持"网络通知应用编程接口");} else { //不支持console.log('不支持"网络通知应用编程接口");} } //浏览器是否支持弹出实例函数狡辩_showMess(){ if(window .通知通知。权限！=='拒绝){通知。请求权限(函数（状态){ if(状态=='已授予){ var n=新通知('收到信息：-O '，{ body: '这里是通知内容！你想看什么客官？icon: '././图片/头像/QQ图片20160525234650 .jpg ' })；//alert('Hi！这是通知消息！");} else { var n=new Notification(' baby！"我会离开你的!");} });} } //实例展示弹出的内容函数otification _ construct(){ var Notification=new Notification('收到新邮件，{ body: '您有一封来自雪静的未读邮件，dir: 'auto '，lang:'zh-CN '，tag: 'a1 '，icon: '././images/header pic/772513932673948130。jpg ' })；控制台。日志(通知。标题)；//'收到新邮件控制台。日志(通知。身体)；//'您总共有3封未读邮件' }//通知应用编程接口的相关事件函数otification _ event(){ var MM=new Notification(' Hi！"我美丽的小公主!"，{ body: '您有一封来外太空的邮件图标： '././images/header pic/20100114212301-1126264202。jpg ' })；mm . onshow=function(){ console。日志('通知显示!');};通知已被单击！);};mm . onerror=function(){ console。日志('通知已被单击!');//手动关闭mm . close()；};}/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。