Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to realize the new message prompt in jquery". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Jquery to achieve new message prompt method: 1, create a HTML sample file; 2, add script tag; 3, through "blinkTitle: {show: function () {var step =.}" method to achieve new message prompt.

The operating environment of this tutorial: windows7 system, jquery-2.0.3 version, Dell G3 computer.

How does jquery implement new message prompts?

JQuery implements flashing prompts for new messages in the title of the web page.

This article mainly introduces the relevant information about the flicker of new messages in the title of the web page on jQuery, which can be referenced by friends who need it.

Some webmasters may notice this effect, that is, when we browse some SNS social and community forums, we often see new messages flashing title prompts, so can we apply this effect to our own website? how to achieve the effect of new messages flashing in the title of the page? The editor has the honor to see such code in a cool technology blog, based on the jquery framework.

My JSP 'test.jsp' starting page Please see the effect at the title of the page! The prompt disappears after an interval of 10 seconds

(function ($) {$.extend ({/ * call method: var timerArr = $.blinkTitle.show (); * $.blinkTitle.clear (timerArr); * / blinkTitle: {show: function () {/ / flashing prompts at title 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 message]'+ _ title}}, 500); return [timer, _ title] }, / * @ param timerArr [0], timer tag * @ param timerArr [1], initial title text content * / clear: function (timerArr) {/ / remove flicker prompt, restore the original title text if (timerArr) {clearInterval (timerArr [0]); document.title = timerArr [1];}});}) (jQuery); jQuery ($) {var timerArr = $.blinkTitle.show () SetTimeout (function () {/ / here is automatically disappeared after a certain period of time $.blinkTitle.clear (timerArr);}, 10000); / / if you think the operation is gone, just call: $.blinkTitle.clear (timerArr);}); this is the end of the content of "jquery how to implement New message Tips". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.