zl程序教程

您现在的位置是:首页 >  后端

当前栏目

JS实现闪动的title消息提醒效果

JS消息 实现 效果 提醒 title 闪动
2023-06-13 09:15:28 时间

有时候我们需要提醒用户,有新的消息,这个可以使用下面的方法实现。

效果就是网页窗口在没有获取焦点并且最小化的时候,网页窗口的标题栏“title”显示的内容为“【】”,“【新消息】”的闪烁效果。

<scriptlanguage="JavaScript">
setTimeout("flash_title()",2000);//2秒之后调用一次
functionflash_title()
{
//当窗口效果为最小化,或者没焦点状态下才闪动
if(isMinStatus()||!window.focus)
{
newMsgCount();
}
else
{
document.title="订单管理中心-AOOXING";//窗口没有消息的时候默认的title内容
window.clearInterval();
}
}
//消息提示
varflag=false;
functionnewMsgCount(){
if(flag){
flag=false;
document.title="【新订单】";
}else{
flag=true;
document.title="【   】";
}
window.setTimeout("flash_title(0)",380);
}
//判断窗口是否最小化
//在Opera中还不能显示
varisMin=false;
functionisMinStatus(){
//除了InternetExplorer浏览器,其他主流浏览器均支持WindowouterHeight和outerWidth属性
if(window.outerWidth!=undefined&&window.outerHeight!=undefined){
isMin=window.outerWidth<=160&&window.outerHeight<=27;
}else{
isMin=window.outerWidth<=160&&window.outerHeight<=27;
}
//除了InternetExplorer浏览器,其他主流浏览器均支持WindowscreenY和screenX属性
if(window.screenY!=undefined&&window.screenX!=undefined){
isMin=window.screenY<-30000&&window.screenX<-30000;//FFChrome
}else{
isMin=window.screenTop<-30000&&window.screenLeft<-30000;//IE
}
returnisMin;
}
</script>