需求：有些任務需要定時更新，獲取最新的消息，這樣就需要定時輪詢，再者需要一種友好的提示。
以下就是使用PNotify插件的消息提示：
1、HTML代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Demo</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/bootstrap.css"> 8 <link rel="stylesheet" href="css/pnotify.css"> 9 <link rel="stylesheet" href="css/pnotify.brighttheme.css"> 10 <link rel="stylesheet" href="css/pnotify.history.css"> 11 <link rel="stylesheet" href="css/pnotify.buttons.css"> 12 13 14 <script type="text/javascript" src="js/require.js"></script> 15 <script type="text/javascript" src="js/jquery.js"></script> 16 <script type="text/javascript" src="js/pnotify.js"></script> 17 <script type="text/javascript" src="js/pnotify.reference.js"></script> 18 <script type="text/javascript" src="js/pnotify.history.js"></script> 19 <script type="text/javascript" src="js/pnotify.buttons.js"></script> 20 <script type="text/javascript" src="js/bootstrap.js"></script> 21 <script type="text/javascript"> 22 var timmer; 23 var counter = 1; 24 $(function(){ 25 $("#button1").click(function(){ 26 showNotice('你有一個新消息','此消息來源：【'+$(this).text()+'】'); 27 }); 28 $("#button2").click(function(){ 29 timmer = setInterval(function(){ 30 showNotice('你有一個新消息','此消息來源：【'+'定時輪詢'+counter+'】','warning'); 31 counter++; 32 },1000); 33 }); 34 35 $("#button3").click(function(){ 36 clearInterval(timmer); 37 counter = 1; 38 }); 39 }); 40 41 42 //消息展示 43 function showNotice(title, text, type = 'info', delay = 1000*10 ) { 44 requirejs(['jquery', 'pnotify', 'pnotify.history','pnotify.buttons'], function($, PNotify){ 45 PNotify.prototype.options.styling = "bootstrap3"; 46 new PNotify({ 47 title: title, 48 text: text, 49 type:type, 50 delay:delay, 51 hide:true, //是否自動關閉 52 mouse_reset:true, //鼠標懸浮的時候，時間重置 53 54 history:{ 55 history:true, 56 menu:true, 57 fixed:true, 58 maxonscreen:Infinity , 59 labels: {redisplay: "歷史消息", all: "顯示全部", last: "最后一個"} 60 }, 61 buttons:{ 62 closer:true, 63 closer_hover:false, 64 sticker_hover:true, 65 //labels: {close: "Close", stick: "Stick"} 66 }, 67 68 69 70 }); 71 }); 72 } 73 </script> 74 </head> 75 <body> 76 <div style="padding: 25vh 0; text-align: center;"> 77 <button id="button1" class="btn btn-info">彈出新窗口</button><hr> 78 <button id="button2" class="btn btn-success">開始定時輪詢</button><hr> 79 <button id="button3" class="btn btn-warning">清除定時輪詢</button> 80 </div> 81 </body> 82 </html>
2、效果圖
3、源碼附件