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

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

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Les utilisateurs rencontrent de rares problèmes : les montres intelligentes Samsung Watch rencontrent soudainement des problèmes d'écran blanc Les utilisateurs rencontrent de rares problèmes : les montres intelligentes Samsung Watch rencontrent soudainement des problèmes d'écran blanc Apr 03, 2024 am 08:13 AM

Les utilisateurs rencontrent de rares problèmes : les montres intelligentes Samsung Watch rencontrent soudainement des problèmes d'écran blanc

Examen du radiateur Kyushu Fengshen Assassin 4S Style 'Assassin Master' refroidi par air Examen du radiateur Kyushu Fengshen Assassin 4S Style 'Assassin Master' refroidi par air Mar 28, 2024 am 11:11 AM

Examen du radiateur Kyushu Fengshen Assassin 4S Style 'Assassin Master' refroidi par air

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Dec 17, 2023 pm 06:55 PM

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS

Art exquis de la lumière et de l'ombre au printemps, Haqu H2 est le choix rentable Art exquis de la lumière et de l'ombre au printemps, Haqu H2 est le choix rentable Apr 17, 2024 pm 05:07 PM

Art exquis de la lumière et de l'ombre au printemps, Haqu H2 est le choix rentable

Test de l'alimentation à module complet Huntkey MX750P : 750 W de puissance concentrée en platine Test de l'alimentation à module complet Huntkey MX750P : 750 W de puissance concentrée en platine Mar 28, 2024 pm 03:20 PM

Test de l'alimentation à module complet Huntkey MX750P : 750 W de puissance concentrée en platine

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières

Test du Colorful Hidden Star P15 24 : un ordinateur portable de jeu polyvalent avec une belle apparence et des performances Test du Colorful Hidden Star P15 24 : un ordinateur portable de jeu polyvalent avec une belle apparence et des performances Mar 06, 2024 pm 04:40 PM

Test du Colorful Hidden Star P15 24 : un ordinateur portable de jeu polyvalent avec une belle apparence et des performances

See all articles