Of Stack

Js page title bar flashing prompt effect example analysis

  • 2020-03-30 04:20:56
  • OfStack

In this paper, the example of js to achieve the title bar flashing prompt effect method. Share with you for your reference. Specific analysis is as follows:

Page title bar flashing effect we will often see in some chat tools, like the current flow of the chat room, we will give you a summary of the realization of a page title bar flashing prompt code, interested can refer to.

The company's project USES the effect of this new message prompt, which is mainly used to alert users to a new message. The specific implementation code is as follows: 


var newMessageRemind={
_step: 0,
_title: document.title,
_timer: null,
//Displays a new message prompt
show:function(){
var temps = newMessageRemind._title.replace(" 【 】 ", "").replace(" [new news] ", "");
newMessageRemind._timer = setTimeout(function() {
newMessageRemind.show();
//I'm going to write the Cookie operation here
newMessageRemind._step++;
if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };
if (newMessageRemind._step == 1) { document.title = " 【 】 " + temps };
if (newMessageRemind._step == 2) { document.title = " [new news] " + temps };
}, 800);
return [newMessageRemind._timer, newMessageRemind._title];
},
//Cancel the new message prompt
clear: function(){
clearTimeout(newMessageRemind._timer );
document.title = newMessageRemind._title;
//I'm going to write the Cookie operation here
}
};

The call displays a new message prompt: newMessageRemind.show();
Call cancel new message prompt: newMessageRemind.clear();

Look at the above code and optimize it yourself, anyway, you can learn to absorb it. :) I mainly think that the field newMessageRemind in his code is used too much, it looks so dense, how uncomfortable it is, I want to show it in a small and fresh way, so I have the following code: 


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

Is it a lot fresher? ^_^ 


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> Holiday!! </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 = ' [new news] ' + 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>

Continue to share one 


<script>
(function() {
  var OriginTitile = document.title, titleTime;
  document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
      document.title = ' Where's the ghost! ';
      clearTimeout(titleTime);
    } else {
      document.title = '( つ ェ ⊂) yi ! Good again !';
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      },2000);
    }
  });
})();
</script>
Related articles: