js implémentation de la barre de titre de la page Web clignotante exemple d'effet d'invite compétences d'analyse

Maison

interface Web

js tutoriel

js implémentation de la barre de titre de la page Web clignotante exemple d'effet d'invite compétences d'analyse_javascript

May 16, 2016 pm 04:31 PM

js 效果

L'exemple de cet article décrit comment utiliser js pour obtenir l'effet d'invite clignotante de la barre de titre d'une page Web. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Nous voyons souvent l'effet clignotant de la barre de titre de la page Web dans certains outils de chat, tels que les salles de discussion actuelles à fort trafic, nous résumerons ci-dessous un code pour réaliser l'invite clignotante de la barre de titre de la page Web si vous êtes intéressé. , vous pouvez vous y référer.

Cet effet d'invite de nouveau message est utilisé dans les projets de l'entreprise et est principalement utilisé pour rappeler aux utilisateurs qu'il y a de nouveaux messages. Le code d'implémentation spécifique est le suivant :

Copier le code Le code est le suivant :

var newMessageRemind={

_pas : 0,

_titre : document.titre,

_timer : nul,

//Afficher une nouvelle invite de message

show:fonction(){

var temps = newMessageRemind._title.replace("【　　】", "").replace("【Nouveau message】", "");

newMessageRemind._timer = setTimeout(function() {

newMessageRemind.show();

//Écrivez l'opération Cookie ici

newMessageRemind._step ;

if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };

if (newMessageRemind._step == 1) { document.title = "【　　】" temps };

if (newMessageRemind._step == 2) { document.title = "[Nouveau message]" temps };

}, 800);

return [newMessageRemind._timer, newMessageRemind._title];

},

//Annuler l'invite de nouveau message

clair : fonction(){

clearTimeout(newMessageRemind._timer);

document.title = newMessageRemind._title;

//Écrivez l'opération Cookie ici

>

};

Appelez pour afficher le rappel d'un nouveau message : newMessageRemind.show();
Appelez pour annuler le rappel de nouveau message : newMessageRemind.clear();
Après avoir lu le code ci-dessus, je l'optimiserai moi-même. Quoi qu'il en soit, ce serait bien si je pouvais l'absorber et l'apprendre. :) J'avais principalement l'impression que le champ newMessageRemind dans son code était trop utilisé, et qu'il avait l'air dense et inconfortable. Je voulais le montrer d'une manière nouvelle, alors j'ai trouvé le code suivant :
.

Copier le code Le code est le suivant :

var newMessageRemind = function () { 

var je = 0, 

         titre = document.titre, 

         boucle ; 

Retour { 

afficher : fonction () { 

             boucle = setInterval(function () { 

je ; 

Si ( i == 1 ) document.title = titre '[Nouvelles]' 

Si ( i == 2 ) document.title = '【　】' titre 

Si ( je == 3 ) je = 0 

             }, 800 ); 

         }, 

Arrêter : fonction() { 

                                                                                                         ,,,,,,,,,,,,,,,,
                 document.title = titre 

           } 

}; 

} ();

N'est-ce pas beaucoup plus frais ? ^_^

Copier le code Le code est le suivant :

<!DOCTYPE HTML>

<html lang="en-US">

<tête>

<meta charset="UTF-8">

<title>放假啦！！！</title>

</tête>

<corps>

<id du bouton="test">stop</bouton>

<script type="text/javascript">

var newMessageRemind = fonction () {

 var je = 0,

  titre = document.titre,

  boucle ;

 revenir {

  afficher : fonction () {

   boucle = setInterval(function () {

    je ;

    if ( i == 1 ) document.title = '【新消息】' title;

    if ( i == 2 ) document.title = '【　　　】' title;

    si ( je == 3 ) je = 0;

   }, 800);

  },

  arrêter : fonction() {

   clearInterval(boucle);

   document.titre = titre;

  >

 };

} ();

newMessageRemind.show();

document.getElementById('test').onclick = function () {

 newMessageRemind.stop();

};

</script>

</corps>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn