浏览器标题栏闪烁效果JavaScript代码

内容摘要
最近看到很多web游戏的广告都是浏览器标题栏闪烁效果，今天在WEB前端看到了这段代码，正好就是这个效果，贴上来学习一下
文章正文

最近看到很多web游戏的广告都是浏览器标题栏闪烁效果，今天在WEB前端看到了这段代码，正好就是这个效果，贴上来学习一下：

JavaScript Code复制内容到剪贴板
  1. var newMessageRemind={   
  2. _step: 0,   
  3. _title: document.title,   
  4. _timer: null,   
  5. //显示新消息提示   
  6. show:function(){   
  7. var temps = newMessageRemind._title.replace("【　　　】", "").replace("【新消息】", "");   
  8. newMessageRemind._timer = setTimeout(function() {   
  9. newMessageRemind.show();   
  10. //这里写Cookie操作   
  11. newMessageRemind._step++;   
  12. if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };   
  13. if (newMessageRemind._step == 1) { document.title = "【　　　】" + temps };   
  14. if (newMessageRemind._step == 2) { document.title = "【新消息】" + temps };   
  15. }, 800);   
  16. return [newMessageRemind._timer, newMessageRemind._title];   
  17. },   
  18. //取消新消息提示   
  19. clear: function(){   
  20. clearTimeout(newMessageRemind._timer );   
  21. document.title = newMessageRemind._title;   
  22. //这里写Cookie操作   
  23. }   
  24.   
  25. };  

 

调用显示新消息提示：newMessageRemind.show();

调用取消新消息提示：newMessageRemind.clear();

以下是Demo

HTML/XML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>标题新消息提示demo</title>  
  6.   
  7. </head>  
  8.   
  9. <body>  
  10. <a href="#" onclick="clearNewMessageRemind();return false;">点击取消闪烁提示</a>  
  11. <script type="text/javascript">  
  12. var newMessageRemind={   
  13.  _step: 0,   
  14.     _title: document.title,   
  15.     _timer: null,   
  16.  //显示新消息提示   
  17.  show:function(){   
  18.   var temps = newMessageRemind._title.replace("【　　　】", "").replace("【新消息】", "");   
  19.    newMessageRemind._timer = setTimeout(function() {   
  20.             newMessageRemind.show();   
  21.    //这里写Cookie操作   
  22.             newMessageRemind._step++;   
  23.             if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };   
  24.             if (newMessageRemind._step == 1) { document.title = "【　　　】" + temps };   
  25.             if (newMessageRemind._step == 2) { document.title = "【新消息】" + temps };   
  26.         }, 800);   
  27.         return [newMessageRemind._timer, newMessageRemind._title];   
  28.  },   
  29.  //取消新消息提示   
  30.  clear: function(){   
  31.   clearTimeout(newMessageRemind._timer );   
  32.   document.title = newMessageRemind._title;   
  33.   //这里写Cookie操作   
  34.  }   
  35.       
  36. };   
  37. newMessageRemind.show();   
  38. function clearNewMessageRemind() {   
  39.  newMessageRemind.clear();   
  40. }   
  41. </script>  
  42.   
  43. </body>  
  44. </html>  
代码注释
上一篇iframe自适应高度的js代码下一篇Javascript验证18位身份证的代码

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！