Cet article décrit la méthode de JS pour réaliser l'effet d'invite scintillant de la barre de titre de la page Web. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Nous voyons souvent l'effet vacillant de la barre de titre de la page Web dans certains outils de chat, tels que la salle de chat avec le trafic actuel. Résumons un code rapide pour implémenter la barre de titre de la page Web scintillante. Si vous êtes intéressé, veuillez y consulter.
Le projet de l'entreprise utilise l'effet de cette nouvelle invite de messages, qui est principalement utilisée pour inciter les utilisateurs à avoir de nouveaux messages. Le code d'implémentation spécifique est le suivant:
var newMessageRemend = {_ Étape: 0, _title: document.title, _timer: null, // affiche de nouvelles invites de message afficher: function () {var temps = newMessageRemend._title.replace ("【】", ") .replace (" 【newstime ("); {newMessageReMind.show (); // Écrivez l'opération de cookie ici newMessageMind._step ++; if (newMessageMind._step == 3) {newMessageMind._step = 1}; if (newMessageMind._Step == 1) {document.Title = "【【】】】}}; (newMessageRemend._step == 2) {document.title = "【nouveau message】" + temps};}, 800); return [newMessageMind._timer, newMessageMind._Title];}, // annuler le nouveau message invite: function () {clairement tempsout (newMessageMing newMessageRemend._Title; // Écrivez l'opération de cookie ici}}; Appel pour afficher une nouvelle invite de message: newMessageRemind.show();
Appelez pour annuler la nouvelle invite de message: newMessageRemind.clear();
Après avoir lu le code ci-dessus, je vais l'optimiser moi-même. Quoi qu'il en soit, je peux l'absorber et l'apprendre moi-même. :) Je pense principalement que le champ NewMessageMind dans son code est trop utilisé, il a l'air dense et inconfortable. J'ai pensé à le montrer de manière nouvelle, j'ai donc obtenu le code suivant:
var newMessageReMind = function () {var i = 0, title = document.title, Loop; return {show: function () {loop = setInterval (function () {i ++; if (i == 1) document.title = '【nouveau message】' + title; if (i == 2) document.title = '【】' + title; if (i == 3) i = 0;}, 800); }, stop: function () {ClearInterval (Loop); document.title = title; }}; } ();Est-ce beaucoup plus frais? ^ _ ^
<! Doctype html> <html lang = "en-us"> <éadf> <meta charset = "utf-8"> <itle> c'est des vacances! ! ! </ title> </ head> <body> <Button id = "test"> stop </ bouton> <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 = '【nouveau 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>Continuer à en partager un
<Script> (function () {var origintitile = document.title, titletime; document.addeventListener ('VisibilityChange', function () {if (document.hidden) {document.title = 'où le fantôme mort est allé! {document.title = origine d'origine;}, 2000);J'espère que cet article sera utile à la programmation JavaScript de tous.