Cómo parpadear la pantalla en JavaScript

El parpadeo de la pantalla en los sitios web se usa generalmente cuando el sitio web desea llamar la atención del usuario a una información o acción específica. Algunos escenarios comunes en los que se puede usar el parpadeo de la pantalla cuando se produce un error, para alertar al usuario de que algo salió mal y les pide que tomen medidas, o sobre mensajes nuevos, actualizaciones u otra información importante, o para llamar la atención sobre un botón específico o un botón específico. acción que se le solicita al usuario que tome, como un "Comprar ahora "o un" suscríbete" botón.

Este tutorial demostrará el procedimiento para parpadear la pantalla en JavaScript.

Cómo parpadear la pantalla en JavaScript?

Para parpadear la pantalla en JavaScript, use el "setInterval ()"Método para mostrar una funcionalidad diferente, como ocultar y mostrar o cambiar los elementos o el color de fondo.

Sintaxis

La siguiente sintaxis se usa para el método setInterval ():

SetInterval (FUNC, Delay)

Ejemplo 1: parpadee la pantalla cambiando el color de fondo de la página

Primero, obtenga la referencia del "cuerpo"Etiqueta usando el"QuerySelector ()" método:

VAR BODY = Documento.QuerySelector ("cuerpo");

Defina una función llamada "Blinkscreen ()", Donde cambiaremos el color de fondo de la página. Este método llamará al "setInterval ()" método:

función BlinkScreen ()
Si (cuerpo.estilo.backgroundColor === "White")
cuerpo.estilo.backgroundColor = "#7AB0C4";

demás
cuerpo.estilo.backgroundColor = "White";

Ahora, invoca el "setInterval ()Método al pasar la función definida con un retraso de tiempo como argumentos:

setInterval (BlinkScreen, 800);

Se puede observar que la pantalla ha sido parpadeada cambiando su color de fondo después de cada 800 milisegundos:

Ejemplo 2: parpadea el botón de suscripción

También puede usar JavaScript para parpadear la pantalla alternando la visibilidad de un elemento en la página. En el ejemplo dado, parpadearemos el botón de dos maneras.

Primero, crea un "Suscribir"Botón en un archivo HTML y asigna una ID"suscribir":

Suscribir

En etiqueta, busca el "SuscribirBotón "Uso de su ID asignada:

botón var = documento.getElementById ("suscríbete");

Ahora, defina una función "BlinkSubScribeButton ()"Donde cambiaremos el color del botón y llamaremos a esta función en el método setInterval ():

function BlinkSubScribeButton ()
if (botón.estilo.backgroundColor === "White")
botón.estilo.backgroundColor = "#7AB0C4";
demás
botón.estilo.backgroundColor = "White";

Pasar la función especificada y el retraso de tiempo en el método setInterval () como parámetros:

setInterval (BlinkSubScribeButton, 500);

Producción

En el siguiente ejemplo dado, el botón de suscripción con la identificación de "suscribir"Está inicialmente oculto, y el método setInterval () se usa para alternar su visibilidad entre oculto y visible.

Crear un "Suscribir"Botón en un archivo HTML y establecer la visibilidad"oculto":

Suscribir

Obtenga la referencia del botón usando "getElementById ()" método:

botón var = documento.getElementById ("suscríbete");

Llama a "setInterval ()"Método y en la función de devolución de llamada, muestre el botón configurando su visibilidad en"visible”, Y pase el retraso de tiempo como argumento al método SetInterval:

setInterval (function ()
if (botón.estilo.visibilidad === "oculto")
botón.estilo.visibilidad = "visible";
demás
botón.estilo.visibilidad = "oculto";

, 500);

Como puede ver, el botón de suscripción está alternando en la pantalla después de cada 500 milisegundos:

Ejemplo 3: parpadea la pantalla usando CSS

También puede usar la clase CSS para parpadear cualquier elemento específico en la página web.

En el siguiente ejemplo, parpadearemos el encabezado asignándole una clase CSS:

Parpadea la pantalla

En la hoja de estilo, crea una clase "parpadear"Y establece el estilo de animación:

.parpadear
Animación: Blink 1s Lineal Infinite;

Establezca los fotogramas clave de la clase de parpadeo cambiando su opacidad:

@Keyframes Blink
0% opacidad: 1;
50% Opacidad: 0;
100% Opacidad: 1;

Producción

Hemos compilado toda la información necesaria relevante para la pantalla parpadeante en JavaScript.

Conclusión

Para parpadear la pantalla, use el "setInterval ()Método "Al pasar la función especificada o la función de devolución de llamada con el retraso de tiempo. El parpadeo de la pantalla en los sitios web generalmente se utiliza cuando el sitio web desea llamar la atención del usuario a una información o acción específica. Este tutorial demostró el procedimiento para parpadear la pantalla en JavaScript.