H5桌面小通知

最新推荐文章于 2022-06-23 15:55:09 发布

MrFano

最新推荐文章于 2022-06-23 15:55:09 发布

阅读量696

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/mrfano/article/details/72676881

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

</style>
</head>
<body>
<audio src="1.mp3" id="mp3"></audio>
<input type="button" value="点击发送通知" id="btn">
<script>
window.οnlοad=function(){
var btn = document.getElementById('btn');
var mp3 = document.getElementById('mp3');

//封装桌面通知
var popNotice=function(){
if (window.Notification) {
var notification = new Notification('开枪了',{body:'开枪了',icon:'1.png'})
notification.οnshοw=function(){
//声音
mp3.play();
}
var noti = function(){
notification.close();
mp3.pause();
}
notification.onclose=function(){
noti();
}
notification.οnclick=function(){
noti();
}
}
}
//点击按钮发送通知
btn.οnclick=function(){
if (Notification.permission =='granted') {
popNotice();
}else if (Notification.permission!='denied') {
Notification.requestPermission(function(permission){
popNotice();
})
}
}
}
</script>
</body>
</html>