jQuery implements the method of flashing new message headers

This article illustrates an example of how jQuery implements a new message flashing header prompt. Share with you for your reference. The details are as follows:

This code allows you to flash a prompt in the title bar.

1. jQuery plug-in style code

;(function($) {
  $.extend({
    /**
     *  Call method:  var timerArr = $.blinkTitle.show();
     *     $.blinkTitle.clear(timerArr);
     */
    blinkTitle : {
      show : function() { // When there is new information title Spot flashing cue 
        var step=0, _title = document.title;
        var timer = setInterval(function() {
          step++;
          if (step==3) {step=1};
          if (step==1) {document.title=' 【 】 '+_title};
          if (step==2) {document.title=' [new news] '+_title};
        }, 500);
        return [timer, _title];
      },
      /**
       * @param timerArr[0], timer tag 
       * @param timerArr[1],  The initial title The text content 
       */
      clear : function(timerArr) {
      // Remove the flicker and restore the initial title The text 
        if(timerArr) {
          clearInterval(timerArr[0]); 
          document.title = timerArr[1];
        };
      }
    }
  });
})(jQuery);

2. The call method is as follows:

jQuery(function($) {
  var timerArr = $.blinkTitle.show();
  setTimeout(function() {// Here is a 1 It will disappear automatically after setting time 
    $.blinkTitle.clear(timerArr);
  }, 10000);
  // If the human operation disappears, simply call: $.blinkTitle.clear(timerArr);
});

Click here to download the complete example code.

I hope this article is helpful for you to design jQuery program.