JS制作适用于手机和电脑的通知信息效果
今天项目基本都提测完了，所有利用空闲时间，写两篇文章。上一篇《如何搭建node工程》想必大家有需要学习的都已经看过了。这篇文章最后展示出来的效果确实很棒，所以在这里，想记录下来，以后自己也可以看看。
还是和以前一样的套路，咱们一步一步讲，这样看的思路很明了。
先看一下效果吧：
注意右下角，出现的弹出消息，我们实现的就是这样的效果。
效果看完了，接下来就进入分布讲解模式了………..
第一步：先写一个架子
接下来的代码都是在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();
};
}
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍python使用itchat实现手机控制电脑，包括了python使用itchat实现手机控制电脑的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了python使用itchat实现手机控制电脑的具体代码，供大家参考，具体内容如下 1.准备材料 首先电脑上需要安装了python，安装了opencv更好（非必需） 如果安装了opencv的话，在opencv的python目录下找
-
我在当前项目中使用Butternife库时遇到了一点问题。我目前正在为手机和平板电脑优化项目，有时两者的布局文件之间会有细微的差异，例如 该类如下所示： 问题是，当在电话上查看时，这会引发一个丢失视图的异常，因为“text2”视图不存在。这周围有什么吗？或者，对于并非所有布局都可用的视图，我必须使用findViewById。谢了！
-
当手机端和电脑端同时在线时，用户可以通过手机端退出电脑端 操作方法：消息界面-搜索栏下方-退出电脑端
-
本文向大家介绍JS制作手机端自适应缩放显示，包括了JS制作手机端自适应缩放显示的使用技巧和注意事项，需要的朋友参考一下 JS制作手机端自适应缩放显示 示例一： 示例二： 示例三： 总结： 一.其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。 <meta name="viewport" content="width=device-width, initial-scale=1"
-
手机通知功能便于您通过手表收到来电、信息和应用程序通知提醒。您在手表上收到的通知与手机上收到的相同。手机通知适用于 iOS 和 Android 手机。 若要使用手机通知，您需要在手机上安装 Polar Flow 应用，并且还需要将其与手表配对。请参阅将移动设备与手表配对，了解相关说明。 将手机通知设置为开启 在手表上，进入 Settings（设置） > General settings（一般设置）
-
手机通知功能便于您通过手表收到来电、信息和应用程序通知提醒。您在手表上收到的通知与手机上收到的相同。手机通知适用于 iOS 和 Android 手机。 若要使用手机通知，您需要在手机上安装 Polar Flow 应用，并且还需要将其与手表配对。请参阅将移动设备与手表配对，了解相关说明。 将手机通知设置为开启 在手表上，进入 Settings（设置） > General settings（一般设置）