Come sbattere le palpebre sullo schermo in JavaScript

Schermate lampeggiante sui siti Web viene generalmente utilizzato quando il sito Web desidera attirare l'attenzione dell'utente su una specifica informazione o azione. Alcuni scenari comuni in cui si può usare le lampeggiature dello schermo quando si verifica un errore, per avvisare l'utente che qualcosa è andato storto e spingerli ad agire, o su nuovi messaggi, aggiornamenti o altre informazioni importanti o per attirare l'attenzione su un pulsante specifico o Azione che all'utente viene richiesto di intraprendere, come un "Acquista ora "o un" iscriviti"Pulsante.

Questo tutorial dimostrerà la procedura per lampeggiare lo schermo in JavaScript.

Come sbattere le palpebre sullo schermo in JavaScript?

Per battere le palpebre lo schermo in JavaScript, usa il “setInterval ()"Metodo per mostrare alcune funzionalità diverse, come nascondere o mostrare gli elementi o il colore di sfondo.

Sintassi

La seguente sintassi viene utilizzata per il metodo setInterval ():

setInterval (func, ritardo)

Esempio 1: lampeggiare lo schermo modificando il colore di sfondo della pagina

Innanzitutto, ottieni il riferimento di "corpoTag usando il "QuerySelector ()" metodo:

var body = document.QuerySelector ("corpo");

Definire una funzione chiamata "BlinkScreen ()", Dove cambieremo il colore di sfondo della pagina. Questo metodo chiamerà nel "setInterval ()" metodo:

funzione blinkscreen ()
Se (corpo.stile.backgroundColor === "White")
corpo.stile.backgroundColor = "#7ab0c4";

altro
corpo.stile.backgroundColor = "White";

Ora, invoca il "setInterval ()"Metodo passando la funzione definita con un ritardo come argomenti:

setInterval (Blinkscreen, 800);

Si può osservare che lo schermo è statompettato modificando il colore di sfondo dopo ogni 800 millisecondi:

Esempio 2: lampeggiare il pulsante di iscrizione

È inoltre possibile utilizzare JavaScript per lampeggiare lo schermo attivando la visibilità di un elemento nella pagina. Nell'esempio dato, le palpebremo il pulsante in due modi.

Innanzitutto, crea un "sottoscrivi"Pulsante in un file HTML e assegnare un ID"sottoscrivi":

sottoscrivi

In tag, prendi il "sottoscrivi"Pulsante usando il suo ID assegnato:

Var Button = Document.getElementById ("iscriviti");

Ora, definisci una funzione "BlinkSubscribeButton ()"Dove cambieremo il colore del pulsante e chiameremo questa funzione nel metodo setInterval ():

Funzione BlinkSubscribeBotton ()
Se (pulsante.stile.backgroundColor === "White")
pulsante.stile.backgroundColor = "#7ab0c4";
altro
pulsante.stile.backgroundColor = "White";

Passa la funzione specificata e il ritardo nel metodo setInterval () come parametri:

setInterval (BlinksubscribeButton, 500);

Produzione

Nell'esempio successivo, il pulsante di iscrizione con l'ID di "sottoscrivi"Inizialmente è nascosto e il metodo setInterval () viene utilizzato per attivare la sua visibilità tra nascosto e visibile.

Creare un "sottoscrivi"Pulsante in un file HTML e imposta la visibilità"nascosto":

sottoscrivi

Ottieni il riferimento del pulsante usando "getElementById ()" metodo:

Var Button = Document.getElementById ("iscriviti");

Chiama il "setInterval ()"Metodo e nella funzione di callback, mostra il pulsante impostando la sua visibilità su"visibile"E passare il ritardo come argomento al metodo SetInterval:

setInterval (function ()
Se (pulsante.stile.visibilità === "nascosto")
pulsante.stile.visibilità = "visibile";
altro
pulsante.stile.visibilità = "nascosto";

, 500);

Come puoi vedere che il pulsante di iscrizione è attivato sullo schermo dopo ogni 500 millisecondi:

Esempio 3: lampeggiare lo schermo usando CSS

È inoltre possibile utilizzare la classe CSS per battere le palpebre qualsiasi elemento specifico nella pagina Web.

Nell'esempio seguente, lampeteremo l'intestazione assegnando una classe CSS:

Sfigare lo schermo

Con il foglio di stile, crea una classe "battito di ciglia"E imposta lo stile di animazione:

.battito di ciglia
Animazione: lampeggiare 1s Linear Infinite;

Imposta i frame chiave della classe Blink modificando la sua opacità:

@KeyFrames Blink
0% opacità: 1;
50% opacità: 0;
100% opacità: 1;

Produzione

Abbiamo compilato tutte le informazioni necessarie pertinenti alla schermata lampeggiante in JavaScript.

Conclusione

Per battere le palpebre dello schermo, usa il “setInterval ()"Metodo passando la funzione specificata o la funzione di callback con il ritardo. Schermate lampeggiante sui siti Web viene generalmente utilizzato quando il sito Web desidera attirare l'attenzione dell'utente su una specifica informazione o azione. Questo tutorial ha dimostrato la procedura per battere le palpebre nello schermo in JavaScript.