JS制作適用於手機和電腦的通知信息效果
編輯：關於JavaScript
今天項目基本都提測完了，所有利用空閒時間，寫兩篇文章。上一篇《如何搭建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();
};
}
這裡基本功能已經講解完畢，這裡附上上面效果的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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦