言

Notification API 是 HTML5 新增的桌面通知 API，用于向用戶顯示通知信息。該通知是脫離瀏覽器的，即使用戶沒有停留在當前標簽頁，甚至最小化了瀏覽器，該通知信息也一樣會置頂顯示出來。

用戶權限

想要向用戶顯示通知消息，需要獲取用戶權限，而相同的域名只需要獲取一次權限。只有用戶允許的權限下，Notification 才能起到作用，避免某些網站的廣告濫用 Notification 或其它給用戶造成影響。那么如何知道用戶到底是允不允許的？

Notification.permission 該屬性用于表明當前通知顯示的授權狀態，可能的值包括：

• default ：不知道用戶的選擇，默認。granted ：用戶允許。denied ：用戶拒絕。

if(Notification.permission==='granted'){
 console.log('用戶允許通知');
}else if(Notification.permission==='denied'){
 console.log('用戶拒絕通知');
}else{
 console.log('用戶還沒選擇，去向用戶申請權限吧');
}

請求權限

當用戶還沒選擇的時候，我們需要向用戶去請求權限。Notification 對象提供了 requestPermission() 方法請求用戶當前來源的權限以顯示通知。

以前基于回調的語法已經棄用（當然在現在的瀏覽器中還是能用的），最新的規范已將此方法更新為基于 promise 的語法：

Notification.requestPermission().then(function(permission) {
 if(permission==='granted'){
 console.log('用戶允許通知');
 }else if(permission==='denied'){
 console.log('用戶拒絕通知');
 }
});

推送通知

獲取用戶授權之后，就可以推送通知了。

var notification=new Notification(title, options)

參數如下：

• title：通知的標題options：通知的設置選項（可選）。
• body：通知的內容。tag：代表通知的一個識別標簽，相同tag時只會打開同一個通知窗口。
• icon：要在通知中顯示的圖標的URL。
• image：要在通知中顯示的圖像的URL。
• data：想要和通知關聯的任務類型的數據。
• requireInteraction：通知保持有效不自動關閉，默認為false。

還有一些其他的參數，因為用不了或者沒什么用這里就沒必要說了。

var n=new Notification('狀態更新提醒',{
 body: '你的朋友圈有3條新狀態，快去查看吧',
 tag: 'linxin',
 icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
 requireInteraction: true
})

通知消息的效果圖如下：

關閉通知

從上面的參數可以看出，并沒有一個參數用來配置顯示時長的。我想要它 3s 后自動關閉的話，這時可以調用 close() 方法來關閉通知。

var n=new Notification('狀態更新提醒',{
 body: '你的朋友圈有3條新狀態，快去查看吧'
})

setTimeout(function() {
 n.close();
}, 3000);

事件

Notification 接口的 onclick屬性指定一個事件偵聽器來接收 click 事件。當點擊通知窗口時會觸發相應事件，比如打開一個網址，引導用戶回到自己的網站去。

var n=new Notification('狀態更新提醒',{
 body: '你的朋友圈有3條新狀態，快去查看吧',
 data: {
 url: 'http://blog.gdfengshuo.com'
 }
})
n.onclick=function(){
 window.open(n.data.url, '_blank'); // 打開網址
 n.close(); // 并且關閉通知
}

應用場景

前面說那么多，其實就是為了用。那么到底哪些地方可以用到呢？

現在網站的消息提醒，大多數都是在消息中心顯示個消息數量，然后發郵件告訴用戶，這流程完全沒有錯。不過像我這種用戶，覺得別人點個贊，收藏一下都要發個郵件提醒我，老是要去刪郵件（強迫癥），我是覺得挺煩的甚至關閉了郵件提醒。

當然這里并不是說要用 Notification，畢竟它和郵件的功能完全不一樣。

我覺得比較適合的是新聞網站。用戶瀏覽新聞時，可以推送給用戶實時新聞。以騰訊體育為例，它就使用了 Notification API。在頁面中引入了一個 notification2017_v0118.js，有興趣可以看看別人是怎么成熟的使用的。

一進入頁面，就獲取授權，同時自己頁面有個浮動框提示你允許授權。如果允許之后，就開始給你推送通知了。不過它在關閉標簽卡的時候，通知也會被關閉，那是因為監聽了頁面 beforeunload 事件。

function addOnBeforeUnload(e) {
 FERD_NavNotice.notification.close();
}
if(window.attachEvent){
 window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
 window.addEventListener('beforeunload', addOnBeforeUnload, false);
}

兼容

說到兼容，自然是倒下一大片，而且各瀏覽器的表現也會有點差異。移動端的幾乎全倒，PC端的還好大多都能支持，除了IE。所以使用前，需要先檢查一下瀏覽器是否支持 Notification。

方的冬天最怕有風，空氣雖然好了，但是異常的冷，吸幾口冷風感覺肺都結了冰。一大早小白來到辦公室琢磨用戶交互方面的問題，看了幾個網站發現很多網站的彈窗都是自定義的，而且還把彈窗周圍的區域做成了半透明狀，看上去非常不錯。于是小白也準備自己通過css布局一個彈窗試試，一來以后肯定會用上這個功能，二來熟悉一下最近掌握的CSS+HTML布局。

說干就干，小白打開webStrom做起了彈窗的布局。他首先用一個容器layer作為彈窗的容器，然后里面放了窗口容器（dialog），窗口容器里面還包含了三個子容器，分別是標題（layerTitle）、內容區域（layerContent）、按鈕區域（layerBTContainer）。

小白想：“layer要充滿并遮擋整個瀏覽器窗口，而且滾動頁面它還得一直保持遮擋的狀態，把它設置為浮動類型（position:fixed）的容器最合適。里面的dialog需要保持在瀏覽器的最中心位置，因此最好把dialog設置成固定寬度和高度，這樣可以很好的實現居中?！?，于是小白先把layer和dialog以及dialog內部的容器設定了一個初步的CSS樣式。

layer的position設置為fixed，上下左右距離都設置成0，就可以達到占用整個窗口。里面的dialog容器小白根據剛學習的CSS溢出法讓dialog上下都居中。dialog如果是絕對定位，設置上下左右距離都為0它會占用整個父容器區域，但是如果CSS中限制了dialog的寬和高并且設置了marin為auto，它就會基于父容器居中。

為了測試transition屬性，小白還把確定按鈕上面設置了一個鼠標移上去以后漸變的效果，做完以后就是這個樣子：

看到布局好的彈窗小白心里非常高興，突然他想到一個問題，這個彈窗背景還沒設置半透明，于是趕緊往layer上增加了opacity:0.5這個半透明屬性，小白滿懷信息的刷新了頁面，當看到結果時小白發現背景和窗口都變成了半透明。

正好這時老朱從小白身邊經過，隨口跟小白說了一句：“小白，你是不是把窗口的父容器設置成半透明了？”

“是??！父容器背景是黑色，所以我把父容器設置成了半透明！”

“可是父容器設置半透明會對他的子元素產生影響啊，這樣會導致它里面的所有元素都變成半透明，你為啥不給窗口添加一個兄弟容器來實現這個效果呢？”

小白仔細想了想，說道：“哦！我明白了，我可以在layer容器里面放一個跟layer一樣大的容器，這樣就不會沖突了，我再試試！”

不一會小白找到老朱，說道：“我改好了，現在我給dialog添加了一個layerbg容器作為背景層，然后把layer之前的背景色和透明度去掉，放到了新增加的背景層上面，背景層高和寬與layer一樣所以這樣就不會把dialog也變成半透明了。你看看效果?！?/p>

老朱說：“嗯！不錯，你現在通過HTML和CSS布局的這個彈窗還能做很多完善，比如出現彈窗時增加一個動畫效果、給它添加一個關閉按鈕或者取消按鈕等等。除了提示功能以外，你現在做的這個還能再進行深入修改，把它變成可以輸入文字的prompt框，點擊確定以后可以對頁面或者數據庫數據進行修改?！?/p>

想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！

網頁設計過程中，我們會經常用到一些HTML5特效代碼，下面就是為大家整理分享的一些好看炫酷且實用的HTML5特效代碼，可以放心在您的應用程序中使用。

一、Canvas跟隨鼠標光標動畫特效

演示、下載地址：http://www.php.cn/xiazai/js/845

二、HTML5 Canvas泡泡懸浮鼠標特效

演示、下載地址：http://www.php.cn/xiazai/js/1599

三、HTML5卡通可愛風格網頁找不到404錯誤頁面網頁模板

演示、下載地址：http://www.php.cn/xiazai/js/2987

四、HTML5-Canvas線條背景動畫

演示、下載地址：http://www.php.cn/xiazai/js/2930

五、HTML5-Canvas線條背景動畫

演示、下載地址：http://www.php.cn/xiazai/js/2919

六、HTML5-Canvas五彩紙屑飄落動畫特效

演示、下載地址：http://www.php.cn/xiazai/js/2917

更多炫酷html5、javascript特效代碼，盡在：js特效大全

以上就是html5精選特效代碼分享（收藏）的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！