需求：有些任务需要定时更新，获取最新的消息，这样就需要定时轮询，再者需要一种友好的提示。
以下就是使用PNotify插件的消息提示：
1、HTML代码
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/pnotify.css">
<link rel="stylesheet" href="css/pnotify.brighttheme.css">
<link rel="stylesheet" href="css/pnotify.history.css">
<link rel="stylesheet" href="css/pnotify.buttons.css"> <script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/pnotify.js"></script>
<script type="text/javascript" src="js/pnotify.reference.js"></script>
<script type="text/javascript" src="js/pnotify.history.js"></script>
<script type="text/javascript" src="js/pnotify.buttons.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
var timmer;
var counter = 1;
$(function(){
$("#button1").click(function(){
showNotice('你有一个新消息','此消息来源：【'+$(this).text()+'】');
});
$("#button2").click(function(){
timmer = setInterval(function(){
showNotice('你有一个新消息','此消息来源：【'+'定时轮询'+counter+'】','warning');
counter++;
},1000);
}); $("#button3").click(function(){
clearInterval(timmer);
counter = 1;
});
}); //消息展示
function showNotice(title, text, type = 'info', delay = 1000*10 ) {
requirejs(['jquery', 'pnotify', 'pnotify.history','pnotify.buttons'], function($, PNotify){
PNotify.prototype.options.styling = "bootstrap3";
new PNotify({
title: title,
text: text,
type:type,
delay:delay,
hide:true, //是否自动关闭
mouse_reset:true, //鼠标悬浮的时候，时间重置 history:{
history:true,
menu:true,
fixed:true,
maxonscreen:Infinity ,
labels: {redisplay: "历史消息", all: "显示全部", last: "最后一个"}
},
buttons:{
closer:true,
closer_hover:false,
sticker_hover:true,
//labels: {close: "Close", stick: "Stick"}
}, });
});
}
</script>
</head>
<body>
<div style="padding: 25vh 0; text-align: center;">
<button id="button1" class="btn btn-info">弹出新窗口</button><hr>
<button id="button2" class="btn btn-success">开始定时轮询</button><hr>
<button id="button3" class="btn btn-warning">清除定时轮询</button>
</div>
</body>
</html>
2、效果图
3、源码附件