This article describes the method of js to achieve the flickering prompt effect of web page title bar. Share it for your reference. The specific analysis is as follows:
We often see the flickering effect of web page title bar in some chat tools, such as the chat room with current traffic. Let’s summarize a prompt code for implementing flickering web page title bar. If you are interested, please refer to it.
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 the new message prompt: newMessageRemind.clear();
After reading the above code, I will optimize it myself. No matter what, I can absorb and learn it myself. :) I mainly think that the newMessageRemind field in his code is used too much, it looks dense and uncomfortable. I thought of showing it in a fresh way, so I got 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 Message】' + title; if ( i == 2 ) document.title = '【 】' + title; if ( i == 3 ) i = 0; }, 800); }, stop: function () { clearInterval(loop); document.title = title; } }; } ();Is it much fresher? ^_^
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>It's vacation! ! ! </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 Message】' + 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 the dead ghost went!'; clearTimeout(titleTime); } else { document.title = '(つェ⊂)Huh! It's good again!'; titleTime = setTimeout(function() { document.title = OriginTitile; },2000); } });})();</script>I hope this article will be helpful to everyone's JavaScript programming.