JS implementation of flashing title message reminder effect

  • 2020-03-30 03:24:44
  • OfStack

Sometimes we need to remind the user that there is a new message, which can be implemented using the following method.

The effect is the flashing effect of "[]" and "new message" in the title bar of the page window when the page window does not get focus and is minimized.


<script language="JavaScript"> 
setTimeout('flash_title()',2000); //Call it after 2 seconds
function flash_title() 
{ 
  //Only flashes when the window effect is minimized or has no focus
  if(isMinStatus() || !window.focus)
  {
    newMsgCount();
  }
  else
  {
    document.title=' Order management center -AOOXING';//The default title content when the window has no message
    window.clearInterval();
  }
} 
//Message prompt
var flag=false;
function newMsgCount(){
  if(flag){
    flag=false;
    document.title=' New order ';
  }else{
    flag=true;
    document.title=' 【 】 ';
  }
  window.setTimeout('flash_title(0)',380); 
}
//Determines whether the window is minimized
//It doesn't show up in Opera yet
var isMin = false;
function isMinStatus() {
  //Other than Internet Explorer, all major browsers support the Window outerHeight and outerWidth properties
  if(window.outerWidth != undefined && window.outerHeight != undefined){
    isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
  }else{
    isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
  }
  //With the exception of Internet Explorer, all major browsers support the Window screenY and screenX properties
  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>


Related articles: