JS实现网页标题栏新消息闪烁提醒
作者:纸飞机时间:2026-10-28 12:33:37浏览:409
本文介绍如何使用JavaScript实现网页标题栏的新消息闪烁提醒功能。当网页窗口失去焦点或最小化时,标题内容会在默认状态与“新消息”之间交替闪烁,有效吸引用户注意。
JavaScript实现网页标题栏新消息闪烁效果
在Web开发中,有时需要向用户提示存在新消息,可以通过以下方法实现这一功能。
该效果的具体表现为:当网页窗口未获得焦点且处于最小化状态时,浏览器标签页的标题栏内容会呈现“【 】”与“【新消息】”交替闪烁的效果。
<script language="JavaScript">
setTimeout('flash_title()',2000); //2秒之后调用一次
function flash_title()
{
//当窗口效果为最小化,或者没焦点状态下才闪动
if(isMinStatus() || !window.focus)
{
newMsgCount();
}
else
{
document.title='订单管理中心-AOOXING';//窗口没有消息的时候默认的title内容
window.clearInterval();
}
}
//消息提示
var flag=false;
function newMsgCount(){
if(flag){
flag=false;
document.title='【新订单】';
}else{
flag=true;
document.title='【 】';
}
window.setTimeout('flash_title(0)',380);
}
//判断窗口是否最小化
//在Opera中还不能显示
var isMin = false;
function isMinStatus() {
//除了Internet Explorer浏览器,其他主流浏览器均支持Window outerHeight 和outerWidth 属性
if(window.outerWidth != undefined && window.outerHeight != undefined){
isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
}else{
isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
}
//除了Internet Explorer浏览器,其他主流浏览器均支持Window screenY 和screenX 属性
if(window.screenY != undefined && window.screenX != undefined ){
isMin = window.screenY < -30000 && window.screenX < -30000;//FF Chrome
}else{
isMin = window.screenTop < -30000 && window.screenLeft < -30000;//IE
}
return isMin;
}
</script>
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
