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

2011-01-07 23:54:39来源：作者：

最近看到很多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>  

 原文：http://www.css88.com/archives/2963

赞助商链接:

推荐文章
最新文章
网站简介 | 版权声明 | 联系我们 | 在线投稿 | 友情链接 | 广告服务 | RSS订阅 | 网站地图 | 
Copyright © 2000-2011 西部e网 WWW.WESTE.NET. All rights reserved. 陕ICP备05000652号