大家在做一些浏览器端的聊天功能的时候，或者在一些网站跟在线客服咨询的时候，会看到一些消息通知的提示，常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。本篇博客就在这里简单的介绍一下如何实现这样的功能。
1、实现标签页闪烁效果
实现的效果：
当前窗体失焦的时候，标题开始闪动，当前窗体获取焦点的时候，则停止闪动。
注意：这里需要用到窗口的获取焦点和失去焦点的方法，由于IE和其他Chrome及FireFox的区别，这里需要用到的方法就不一样，具体是：
Chrome和FireFox浏览器是window的onfocus, onblur方法；而IE浏览器则是document的onfocusin, onfocusout方法
下面是代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签页标题闪烁</title> </head> <body> <h2>浏览器窗体获得焦点则停止标题闪烁通知+失去焦点则开启标题闪烁通知</h2> <script> // 窗体失焦的时候，标题就会闪。 // 这里有一个小的知识点，就是浏览器窗体获得焦点和失去焦点，Chrome和FireFox浏览器是window的onfocus, onblur方法；而IE浏览器则是document的onfocusin, onfocusout方法，因此有： var titleInit = document.title, isShine = true; setInterval(function() { var title = document.title; if (isShine == true) { if (/新/.test(title) == false) { document.title = '【你有新消息】'; } else { document.title = '【 】'; } } else { document.title = titleInit; } }, 500); // for Chrome and FireFox window.onfocus = function() { console.log(123); isShine = false; }; window.onblur = function() { isShine = true; }; // for IE document.onfocusin = function() { isShine = false; }; document.onfocusout = function() { isShine = true; }; </script> </body> </html>