Jak mrugnąć ekran w JavaScript

Ekran migający na stronach internetowych jest zwykle używany, gdy strona internetowa chce zwrócić uwagę użytkownika na konkretną informację lub działanie. Niektóre popularne scenariusze, w których mrugnięcie ekranu można użyć, gdy wystąpi błąd, aby powiadomić użytkownika, że ​​coś poszło nie tak i skłonić go do podjęcia działań, lub o nowych wiadomościach, aktualizacjach lub innych ważnych informacjach lub zwróceniu uwagi na określony przycisk lub Działanie, o które zachęca się użytkownika, takie jak „Kup teraz ”lub„ Subskrybuj" przycisk.

Ten samouczek pokaże procedurę mrugnięcia ekranu w JavaScript.

Jak mrugnąć ekran w JavaScript?

Aby mrugać ekran w JavaScript, użyj „setInterval ()”Metoda pokazania różnych funkcji, takich jak ukryj i pokazuje lub zmienia elementy lub kolor tła.

Składnia

Do metody setInterval () stosuje się następującą składnię:

setInterval (FUNC, opóźnienie)

Przykład 1: Mrugnij ekran, zmieniając kolor tła strony

Najpierw uzyskaj odniesienie do „ciało”Tag za pomocą„QuerySelelect ()" metoda:

var body = dokument.querySelelector („ciało”);

Zdefiniuj funkcję zwaną „BlinkScreen ()”, Gdzie zmienimy kolor tła strony. Ta metoda wywoła „setInterval ()" metoda:

funkcja BlinkScreen ()
if (ciało.styl.tło Color === „White”)
ciało.styl.BackgroundColor = "#7AB0C4";

w przeciwnym razie
ciało.styl.tło Color = „White”;

Teraz przywołaj „„setInterval ()„Metoda, przekazując zdefiniowaną funkcję z opóźnieniem czasowym jako argumentami:

setInterval (BlinkScreen, 800);

Można zauważyć, że ekran został zamruknięty, zmieniając jego kolor tła po 800 milisekundach:

Przykład 2: Mrugnij przycisk subskrybowania

Możesz także użyć JavaScript do mrugnięcia ekranu, przełączając widoczność elementu na stronie. W danym przykładzie mrugamy przycisk na dwa sposoby.

Najpierw stwórz „Subskrybuj”Przycisk w pliku HTML i przypisz identyfikator„Subskrybuj”:

Subskrybuj

W tagu, pobieraj „Subskrybuj”Przycisk za pomocą przypisanego identyfikatora:

var Button = Dokument.getElementById („subskrypcja”);

Teraz zdefiniuj funkcję „BlinkSubScribeButton ()„Gdzie zmienimy kolor przycisku i wywołamy tę funkcję w metodzie setInterval ():

funkcja BlinkSubScribeButton ()
if (przycisk.styl.tło Color === „White”)
przycisk.styl.BackgroundColor = "#7AB0C4";
w przeciwnym razie
przycisk.styl.tło Color = „White”;

Przekaż określoną funkcję i opóźnienie czasowe w metodzie setInterval () jako parametry:

setInterval (BlinkSubScribeButton, 500);

Wyjście

W następnym podanym przykładzie przycisk subskrypcji z identyfikatorem „Subskrybuj”Jest początkowo ukryty, a metoda setInterval () służy do przełączania swojej widoczności między ukrytymi i widocznymi.

Stwórz "Subskrybuj”Przycisk w pliku HTML i ustaw widoczność”ukryty”:

Subskrybuj

Uzyskaj odniesienie przycisku za pomocą „getElementById ()" metoda:

var Button = Dokument.getElementById („subskrypcja”);

Zadzwoń do "setInterval ()„Metoda i w funkcji wywołania zwrotnego pokaż przycisk, ustawiając jego widoczność do„widoczny”I przekazuj opóźnienie czasowe jako argument do metody SetInterval:

setInterval (function ()
if (przycisk.styl.widoczność === „ukryty”)
przycisk.styl.visibity = „Visible”;
w przeciwnym razie
przycisk.styl.visibility = „ukryty”;

, 500);

Jak widać, przycisk subskrypcji przełącza się na ekranie po 500 milisekundach:

Przykład 3: Mrugnij ekran za pomocą CSS

Możesz także użyć klasy CSS do mrugania dowolnego konkretnego elementu na stronie internetowej.

W poniższym przykładzie mrugnij nagłówek, przypisując do niego klasę CSS:

Mrugnij ekran

W arkuszu stylów utwórz klasę „migać”I ustaw styl animacji:

.mrugnąć
Animacja: liniowy liniowy 1s;

Ustaw klatki kluczowe klasy Blink, zmieniając jej krycie:

@Keyframes Blink
0% krycia: 1;
50% krycie: 0;
100% krycie: 1;

Wyjście

Opracowaliśmy wszystkie niezbędne informacje istotne dla migającego ekranu w JavaScript.

Wniosek

Aby mrugać ekran, użyj „setInterval ()”Metoda, przekazując określoną funkcję lub funkcję wywołania zwrotnego z opóźnieniem czasowym. Ekran migający na stronach internetowych jest zwykle wykorzystywany, gdy strona internetowa chce zwrócić uwagę użytkownika na konkretną informację lub działanie. W tym samouczku pokazano procedurę mrugnięcia ekranu w JavaScript.