JavaScript实现网页标题栏闪烁提示效果

作者：闭包旅人时间：2026-10-28 16:26:29浏览：448

本文详解JavaScript实现网页标题栏闪烁以提示新消息的方法。通过setInterval或setTimeout交替修改document.title，实现“【新消息】”与空白切换效果。提供基础对象封装及IIFE优化版本，并介绍利用visibilitychange事件监听页面状态切换的轻量级方案，帮助开发者提升用户体验。

JavaScript实现网页标题栏闪烁提示效果

本文详细介绍利用JavaScript实现网页标题栏闪烁提示效果的方法，供读者参考学习。

此类标题栏闪烁效果常见于聊天软件或聊天室中，用于吸引用户注意。下文将总结实现该效果的具体代码，感兴趣的用户可以参考。

在部分项目场景中，该功能用于提示用户存在未读消息。具体实现代码如下所示：


var newMessageRemind={
_step: 0,
_title: document.title,
_timer: null,
//显示新消息提示
show:function(){
var temps = newMessageRemind._title.replace("【　　　】", "").replace("【新消息】", "");
newMessageRemind._timer = setTimeout(function() {
newMessageRemind.show();
//这里写Cookie操作
newMessageRemind._step++;
if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };
if (newMessageRemind._step == 1) { document.title = "【　　　】" + temps };
if (newMessageRemind._step == 2) { document.title = "【新消息】" + temps };
}, 800);
return [newMessageRemind._timer, newMessageRemind._title];
},
//取消新消息提示
clear: function(){
clearTimeout(newMessageRemind._timer );
document.title = newMessageRemind._title;
//这里写Cookie操作
}
};

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

参考上述代码后，建议读者自行进行优化。无论代码形式如何，掌握核心逻辑即可。原代码中字段使用频率较高，视觉上较为密集。为提升代码可读性，可尝试更简洁的写法，如下所示：


var newMessageRemind = function () { 
  var i = 0, 
    title = document.title, 
    loop; 
 
  return { 
    show: function () { 
      loop = setInterval(function () { 
        i++; 
        if ( i == 1 ) document.title = '【新消息】' + title; 
        if ( i == 2 ) document.title = '【　　　】' + title; 
        if ( i == 3 ) i = 0; 
      }, 800); 
    }, 
    stop: function () { 
      clearInterval(loop); 
      document.title = title; 
    } 
  }; 
} ();

这种写法是否更加清爽简洁？^_^


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>放假啦！！！</title>
</head>
<body>
<button id="test">stop</button>
<script type="text/javascript">
var newMessageRemind = function () {
 var i = 0,
 title = document.title,
 loop;
 return {
 show: function () {
  loop = setInterval(function () {
  i++;
  if ( i == 1 ) document.title = '【新消息】' + title;
  if ( i == 2 ) document.title = '【　　　】' + title;
  if ( i == 3 ) i = 0;
  }, 800);
 },
 stop: function () {
  clearInterval(loop);
  document.title = title;
 }
 };
} ();
newMessageRemind.show();
document.getElementById('test').onclick = function () {
 newMessageRemind.stop();
};
</script>
</body>
</html>

此外，再分享一种基于页面可见性变化的实现方式。


<script>
(function() {
  var OriginTitile = document.title, titleTime;
  document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
      document.title = '死鬼去哪里了！';
      clearTimeout(titleTime);
    } else {
      document.title = '(つェ⊂)咦!又好了!';
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      },2000);
    }
  });
})();
</script>

希望本文所述内容对大家的JavaScript程序设计有所帮助。

作者最新文章

什么时候该用JS构造器：与工厂模式、字面量的选择对比

2026-11-05 16:18:22

推荐几款轻量级JS照片墙开源库及对比

2026-11-05 15:56:19

JavaScript递归写法有哪些常见陷阱及避免方法

2026-11-05 14:53:38

JS数组浅拷贝与深拷贝怎么选？场景与方法总结

2026-11-05 14:41:02

p5.js 中 setup() 和 draw() 函数的执行机制详解

2026-11-05 12:32:38