Como piscar a tela em javascript

A tela piscando em sites é geralmente usada quando o site deseja chamar a atenção do usuário para uma informação ou ação específica. Alguns cenários comuns em que a tela piscando pode ser usada quando ocorre um erro, para alertar o usuário de que algo deu errado e solicita que eles tome medidas, ou sobre novas mensagens, atualizações ou outras informações importantes, ou a chamar a atenção para um botão específico ou ação que o usuário está sendo solicitado a tomar, como um “Compre agora "ou um" Inscreva -se" botão.

Este tutorial demonstrará o procedimento para piscar a tela em JavaScript.

Como piscar a tela em javascript?

Para piscar a tela em JavaScript, use o “setInterval ()”Método para mostrar alguma funcionalidade diferente, como ocultar e mostrar ou alterar os elementos ou a cor de fundo.

Sintaxe

A sintaxe a seguir é usada para o método setInterval ():

setInterval (func, atraso)

Exemplo 1: pisca a tela alterando a cor de fundo da página

Primeiro, obtenha a referência do “corpo”Tag usando a“QuerySelector ()”Método:

Var Body = Documento.queryselector ("corpo");

Defina uma função chamada “pisca -pisca ()”, Onde mudaremos a cor de fundo da página. Este método chamará o “setInterval ()”Método:

função pishcreen ()
se (corpo.estilo.BackgroundColor === "White")
corpo.estilo.AntecedentesColor = "#7AB0C4";

outro
corpo.estilo.AntecedentesColor = "White";

Agora, invoco o “setInterval ()”Método, passando a função definida com um atraso de tempo como argumentos:

setInterval (blinkscreen, 800);

Pode -se observar que a tela foi piscada alterando sua cor de fundo após cada 800 milissegundos:

Exemplo 2: Pisque o botão de inscrição

Você também pode usar o JavaScript para piscar a tela, alternando a visibilidade de um elemento na página. No exemplo dado, piscaremos o botão de duas maneiras.

Primeiro, crie um “Se inscrever”Botão em um arquivo HTML e atribua um ID“se inscrever”:

Se inscrever

Em tag, busque o “Se inscrever”Botão usando seu ID atribuído:

var Button = documento.getElementById ("Subscribe");

Agora, defina uma função “BlinksubscribeButton ()”Onde alteramos a cor do botão e chamaremos essa função no método setInterval ():

função pishlinksubscribeButton ()
if (botão.estilo.BackgroundColor === "White")
botão.estilo.AntecedentesColor = "#7AB0C4";
outro
botão.estilo.AntecedentesColor = "White";

Passe a função especificada e o atraso de tempo no método setInterval () como parâmetros:

SetInterval (BlinkSubscribeButton, 500);

Saída

No próximo exemplo dado, o botão de inscrição com o ID de “se inscrever”Está inicialmente oculto e o método setInterval () é usado para alternar sua visibilidade entre oculto e visível.

Criar uma "Se inscrever”Botão em um arquivo HTML e defina a visibilidade“escondido”:

Se inscrever

Obtenha a referência do botão usando “getElementById ()”Método:

var Button = documento.getElementById ("Subscribe");

Ligar para "setInterval ()”Método e na função de retorno de chamada, mostre o botão definindo sua visibilidade para“visível”, E passe o atraso de tempo como um argumento para o método setInterval:

setInterval (function ()
if (botão.estilo.visibilidade === "Hidden")
botão.estilo.visibilidade = "visível";
outro
botão.estilo.visibilidade = "oculto";

, 500);

Como você pode ver, o botão de inscrição está alternando na tela após cada 500 milissegundos:

Exemplo 3: Piscar a tela usando CSS

Você também pode usar a classe CSS para piscar qualquer elemento específico na página da web.

No exemplo a seguir, piscaremos o título atribuindo uma classe CSS a ela:

Pisque a tela

Na folha de estilo, crie uma classe “piscar”E defina o estilo de animação:

.piscar
Animação: Blink 1s Linear Infinite;

Defina os quadros -chave da classe Blink alterando sua opacidade:

@KeyFrames Blink
0% Opacity: 1;
50% opacidade: 0;
100% opacidade: 1;

Saída

Compilamos todas as informações necessárias relevantes para a tela piscando no JavaScript.

Conclusão

Para piscar a tela, use o “setInterval ()”Método passando a função especificada ou a função de retorno de chamada com o atraso de tempo. A tela piscando em sites geralmente é utilizada quando o site deseja chamar a atenção do usuário para uma informação ou ação específica. Este tutorial demonstrou o procedimento para piscar a tela em JavaScript.