


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 PML'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 :
_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 :
.
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
}
};
} ();
<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程序设计有所帮助。

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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

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

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

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
