The company's project uses the effect of this new message prompt, which is mainly used to prompt users to have new messages. The specific implementation code is as follows:
var newMessageRemind = { _step: 0, _title: document.title, _timer: null, //Show new message prompts show: function() { var temps = newMessageRemind._title.replace("【 】", "").replace("【New Message】", ""); newMessageRemind._timer = setTimeout(function() { newMessageRemind.show(); //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 Message】" + temps }; }, 800); return [newMessageRemind._timer, newMessageRemind._title]; }, //Cancel the new message prompt clear: function() { clearTimeout(newMessageRemind._timer); document.title = newMessageRemind._title; //write cookie operation here}};Calling to display a new message prompt: newMessageRemind.show();
Call to cancel new message prompt: newMessageRemind.clear();
Also: This simple code will have a problem:
That is, when you open a site with many pages, if there is a new message, all pages will keep flashing, and other pages will still be prompted after you view the message.
Our company solves the problem by using cookies. When viewing new messages, all pages with titles flashing will be cancelled.
The following is another code recommended by Wulin.com editor
<script>(function() { var OriginTitile = document.title, titleTime; document.addEventListener('visibilitychange', function() { if (document.hidden) { document.title = 'Where the dead ghost went!'; clearTimeout(titleTime); } else { document.title = '(つェ⊂)Huh! It's good again!'; titleTime = setTimeout(function() { document.title = OriginTitile; },2000); } });})();</script>Note: The above code must be preloaded with jquery library. Just put it at the bottom of the page or in js