Comment clignoter l'écran en javascript

Les clignotants d'écran sur les sites Web sont généralement utilisés lorsque le site Web souhaite attirer l'attention de l'utilisateur sur une information ou une action spécifique. Certains scénarios courants où les clignotements peuvent être utilisés lorsqu'une erreur se produit, pour alerter l'utilisateur que quelque chose a mal tourné et les inciter à prendre des mesures, ou sur de nouveaux messages, mises à jour ou d'autres informations importantes, ou pour attirer l'attention sur un bouton spécifique ou Action que l'utilisateur est invité à prendre, comme un «Acheter maintenant "ou un" abonnez-vous" bouton.

Ce tutoriel démontrera la procédure pour clignoter l'écran en javascript.

Comment clignoter l'écran en javascript?

Pour clignoter l'écran en JavaScript, utilisez le «setInterval ()«Méthode pour afficher différentes fonctionnalités, comme masquer et afficher ou modifier les éléments ou la couleur d'arrière-plan.

Syntaxe

La syntaxe suivante est utilisée pour la méthode setInterval ():

setInterval (func, retard)

Exemple 1: clignote l'écran en modifiant la couleur d'arrière-plan de la page

Tout d'abord, obtenez la référence du «corps”Tag en utilisant le"QuerySelector ()" méthode:

Var Body = Document.queyselector ("corps");

Définissez une fonction appelée «clignotement ()», Où nous changerons la couleur d'arrière-plan de la page. Cette méthode appellera le «setInterval ()" méthode:

fonction blinkscreen ()
si (corps.style.BackgroundColor === "White")
corps.style.backgroundColor = "# 7ab0c4";

autre
corps.style.BackgroundColor = "White";

Maintenant, invoquez le «setInterval ()«Méthode en passant la fonction définie avec un délai comme arguments:

setInterval (blinkscreen, 800);

On peut observer que l'écran a été cligné des yeux en modifiant sa couleur d'arrière-plan après tous les 800 millisecondes:

Exemple 2: clignote le bouton d'abonnement

Vous pouvez également utiliser JavaScript pour clignoter l'écran en basculant la visibilité d'un élément sur la page. Dans l'exemple donné, nous clignoterons le bouton de deux manières.

Tout d'abord, créez un «S'abonner"Bouton dans un fichier html et attribuez un ID"s'abonner»:

S'abonner

Dans Tag, récupérez le "S'abonner”Bouton utilisant son ID attribué:

Var Button = Document.getElementById ("abonnez-vous");

Maintenant, définissez une fonction "BlinkSubscriberbutton ()«Où nous allons modifier la couleur du bouton et appeler cette fonction dans la méthode setInterval ():

fonction blinkSubscribeButton ()
if (bouton.style.BackgroundColor === "White")
bouton.style.backgroundColor = "# 7ab0c4";
autre
bouton.style.BackgroundColor = "White";

Passez la fonction spécifiée et le retard dans la méthode setInterval () comme paramètres:

setInterval (blinkSubscribeButton, 500);

Sortir

Dans l'exemple suivant, le bouton d'abonnement avec l'ID de "s'abonner"Est initialement caché, et la méthode setInterval () est utilisée pour basculer sa visibilité entre cachée et visible.

Créer un "S'abonner"Bouton dans un fichier html et définissez la visibilité"caché»:

S'abonner

Obtenez la référence du bouton en utilisant "getElementByid ()" méthode:

Var Button = Document.getElementById ("abonnez-vous");

Appeler le "setInterval ()«Méthode et dans la fonction de rappel, affichez le bouton en définissant sa visibilité sur«visible», Et passez le délai comme argument à la méthode SetInterval:

setInterval (function ()
if (bouton.style.Visibilité === "Hidden")
bouton.style.Visibilité = "Visible";
autre
bouton.style.Visibilité = "Hidden";

, 500);

Comme vous pouvez le voir, le bouton d'abonnement est basculé sur l'écran après tous les 500 millisecondes:

Exemple 3: clignote l'écran à l'aide de CSS

Vous pouvez également utiliser la classe CSS pour clignoter tout élément spécifique sur la page Web.

Dans l'exemple suivant, nous clignoterons l'en-tête en lui attribuant une classe CSS:

Clignoter l'écran

Dans la feuille de style, créez une classe "clignoter»Et définissez le style d'animation:

.clignoter
Animation: Blink 1s Linear Infinite;

Définissez les images clés de la classe Blink en modifiant son opacité:

@keyframes clignote
0% opacité: 1;
50% opacité: 0;
100% opacité: 1;

Sortir

Nous avons compilé toutes les informations nécessaires pertinentes à l'écran clignotant en JavaScript.

Conclusion

Pour clignoter l'écran, utilisez le «setInterval ()”Méthode en passant la fonction spécifiée ou la fonction de rappel avec le délai. Les clignotants d'écran sur les sites Web sont généralement utilisés lorsque le site Web souhaite attirer l'attention de l'utilisateur sur une information ou une action spécifique. Ce tutoriel a démontré la procédure pour clignoter l'écran en javascript.