Js implementation of the title bar new message flashing prompt effect

  • 2020-03-30 03:12:34
  • OfStack

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
  }

};

Call to display new message prompt: newMessageRemind. Show ();

Call to cancel new message prompt: newMessageRemind. Clear ();

Another problem with this code is that:
Is when you open a site many pages, if there is a new message, then all the pages will keep flashing, when you see the message after other pages will still prompt.

Our company has solved this problem by using cookies. When viewing new messages, all the pages with flashing titles will cancel the prompt.

Note: the above code requires a preloaded jquery library. Directly at the bottom of the page or js can be


Related articles: