JS制作適用于手機(jī)和電腦的通知信息效果
今天項(xiàng)目基本都提測(cè)完了，所有利用空閑時(shí)間，寫(xiě)兩篇文章。上一篇《如何搭建node工程》想必大家有需要學(xué)習(xí)的都已經(jīng)看過(guò)了。這篇文章最后展示出來(lái)的效果確實(shí)很棒，所以在這里，想記錄下來(lái)，以后自己也可以看看。
還是和以前一樣的套路，咱們一步一步講，這樣看的思路很明了。
先看一下效果吧：
注意右下角，出現(xiàn)的彈出消息，我們實(shí)現(xiàn)的就是這樣的效果。
效果看完了，接下來(lái)就進(jìn)入分布講解模式了………..
第一步：先寫(xiě)一個(gè)架子
接下來(lái)的代碼都是在script標(biāo)簽里面寫(xiě)的，大家只要關(guān)心script標(biāo)簽里面的內(nèi)容即可：
<!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>消息推送實(shí)例</title>
</head>
<body>
查看右下角，的消息通知..........
</body>
</html>
<script type="text/javascript">
</script>
第二步：判斷瀏覽器是否支持Web Notifications API
在這里判斷是否支持Web Notifications API，只有支持這個(gè)東西，我們才能繼續(xù)下來(lái)de 東西。
function justify_notifyAPI(){
if (window.Notification) {
// 支持
console.log("支持"+"Web Notifications API");
} else {
// 不支持
console.log("不支持"+"Web Notifications API");
}
}
第三步：判斷瀏覽器是否支持彈出實(shí)例
這里是一個(gè)彈框，判斷瀏覽器是否支持彈出實(shí)例（圖片地址換成你自己的地址即可）
function justify_showMess(){
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (status === "granted") {
var n = new Notification('收到信息:-O', {
body: '這里是通知內(nèi)容！你想看什么客官？',
icon:"../../images/headerPic/QQ圖片20160525234650.jpg"
});
} else{
var n = new Notification("baby! i will leave you!");
}
});
}
}
第四步：實(shí)例展示彈出的內(nèi)容
Notification構(gòu)造函數(shù)的title屬性是必須的，用來(lái)指定通知的標(biāo)題，格式為字符串。options屬性是可選的，格式為一個(gè)對(duì)象，用來(lái)設(shè)定各種設(shè)置。該對(duì)象的屬性如下：
dir：文字方向，可能的值為auto、ltr（從左到右）和rtl（從右到左），一般是繼承瀏覽器的設(shè)置。
lang：使用的語(yǔ)種，比如en-US、zh-CN。
body：通知內(nèi)容，格式為字符串，用來(lái)進(jìn)一步說(shuō)明通知的目的。
tag：通知的ID，格式為字符串。一組相同tag的通知，不會(huì)同時(shí)顯示，只會(huì)在用戶關(guān)閉前一個(gè)通知后，在原位置顯示。
icon：圖表的URL，用來(lái)顯示在通知上。
function otification_construct(){
var notification = new Notification('收到新郵件', {
body: '您有1封來(lái)自雪靜的未讀郵件。',
dir: "auto",
lang:"zh-CN",
tag: "a1",
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "收到新郵件"
console.log(notification.body); // "您總共有3封未讀郵件。"
}
第五步：Notifications API的相關(guān)事件
Notification實(shí)例會(huì)觸發(fā)以下三種事件：
show：通知顯示給用戶時(shí)觸發(fā)。
click：用戶點(diǎn)擊通知時(shí)觸發(fā)。
close：用戶關(guān)閉通知時(shí)觸發(fā)。
error：通知出錯(cuò)時(shí)觸發(fā)（通知無(wú)法正確顯示時(shí)出現(xiàn)）。
這些事件有對(duì)應(yīng)的onshow、onclick、onclose、onerror方法，用來(lái)指定相應(yīng)的回調(diào)函數(shù)。addEventListener方法也可以用來(lái)為這些事件指定回調(diào)函數(shù)。
function otification_event(){
var MM = new Notification("Hi! My beautiful little princess！",{
body: '您有1封來(lái)外太空的郵件。',
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!');
// 手動(dòng)關(guān)閉
MM.close();
};
}
這里基本功能已經(jīng)講解完畢，這里附上上面效果的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(); //瀏覽器是否支持彈出實(shí)例
otification_construct(); //實(shí)例展示彈出的內(nèi)容
otification_event(); //Notifications API的相關(guān)事件
}
//判斷瀏覽器是否支持 Web Notifications API
function justify_notifyAPI(){
if (window.Notification) {
// 支持
console.log("支持"+"Web Notifications API");
} else {
// 不支持
console.log("不支持"+"Web Notifications API");
}
}
//瀏覽器是否支持彈出實(shí)例
function justify_showMess(){
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (status === "granted") {
var n = new Notification('收到信息:-O', {
body: '這里是通知內(nèi)容！你想看什么客官？',
icon:"../../images/headerPic/QQ圖片20160525234650.jpg"
});
// alert("Hi! this is the notifyMessages!");
} else{
var n = new Notification("baby! i will leave you!");
}
});
}
}
// 實(shí)例展示彈出的內(nèi)容
function otification_construct(){
var notification = new Notification('收到新郵件', {
body: '您有1封來(lái)自雪靜的未讀郵件。',
dir: "auto",
lang:"zh-CN",
tag: "a1",
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "收到新郵件"
console.log(notification.body); // "您總共有3封未讀郵件。"
}
//Notifications API的相關(guān)事件
function otification_event(){
var MM = new Notification("Hi! My beautiful little princess！",{
body: '您有1封來(lái)外太空的郵件。',
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!');
// 手動(dòng)關(guān)閉
MM.close();
};
}
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)換膚功能的方法實(shí)例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)換膚功能的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁(yè)面元素屬性與樣式動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
閉包的功能強(qiáng)大，但如果沒(méi)有正確理解閉包的概念，其結(jié)果往往出乎人的意料。例如，下面是一個(gè)較常見(jiàn)的問(wèn)題2009-03-03
layui lay-verify form表單自定義驗(yàn)證規(guī)則詳解
今天小編就為大家分享一篇layui lay-verify form表單自定義驗(yàn)證規(guī)則詳解，具有很好的參考價(jià)值，相信我對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JavaScript兩種axios取消請(qǐng)求方式小結(jié)
本文主要介紹了JavaScript兩種axios取消請(qǐng)求方式小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
一個(gè)非常全面的javascript URL解析函數(shù)和分段URL解析方法
本文詳細(xì)介紹了一個(gè)非常全面的javascript URL解析函數(shù)，可以解析一個(gè)URL中的協(xié)議、主機(jī)、查詢字符串甚至錨鏈接，非常實(shí)用，一并總結(jié)了js自帶的分段URL解析方法,需要的朋友可以參考下2014-04-04
Bootstrap3使用typeahead插件實(shí)現(xiàn)自動(dòng)補(bǔ)全功能
這篇文章主要介紹了Bootstrap3使用typeahead插件實(shí)現(xiàn)自動(dòng)補(bǔ)全功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
javascript設(shè)計(jì)模式之模塊模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之模塊模式學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript實(shí)現(xiàn)的可變動(dòng)態(tài)數(shù)字鍵盤(pán)控件方式實(shí)例代碼
本篇文章主要介紹了JavaScript實(shí)現(xiàn)的可變動(dòng)態(tài)數(shù)字鍵盤(pán)控件方式實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了了解一下2017-07-07
簡(jiǎn)單實(shí)現(xiàn)js間歇或無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單便捷的實(shí)現(xiàn)js間歇或無(wú)縫滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
JavaScript設(shè)計(jì)模式之迭代者模式詳情
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之迭代者模式詳情，迭代器設(shè)計(jì)模式能夠可以讓我們更方便的且有規(guī)矩的進(jìn)行訪問(wèn)復(fù)合數(shù)據(jù)的每一項(xiàng)，也可以通過(guò)迭代器進(jìn)行完成一些流線式操作2022-06-06