Hvordan blinke skjermen i JavaScript

Skjermblinking på nettsteder brukes vanligvis når nettstedet ønsker å trekke brukerens oppmerksomhet til et bestemt stykke informasjon eller handling. Noen vanlige scenarier der blinking av skjermen kan brukes når en feil oppstår, for å varsle brukeren om at noe gikk galt og be dem om å ta grep, eller om nye meldinger, oppdateringer eller annen viktig informasjon, eller for å trekke oppmerksomhet til en spesifikk knapp eller handling som brukeren blir bedt om å ta, for eksempel en "Kjøp nå ”eller en“ Abonner”-Knappen.

Denne opplæringen vil demonstrere prosedyren for å blinke på skjermen i JavaScript.

Hvordan blinke skjermen i JavaScript?

For å blinke på skjermen i JavaScript, bruk "setInterval ()”Metode for å vise en viss annen funksjonalitet, som skjul og vise eller endre elementene eller bakgrunnsfargen.

Syntaks

Følgende syntaks brukes til SetInterval () -metoden:

SetInterval (func, forsinkelse)

Eksempel 1: Blinker på skjermen ved å endre bakgrunnsfarge på siden

Først må du få referansen til "kropp”Tag ved hjelp av“QuerySelector ()”Metode:

var kropp = dokument.QuerySelector ("Body");

Definere en funksjon som heter “Blinkscreen ()”, Hvor vi vil endre bakgrunnsfargen på siden. Denne metoden vil ringe inn “setInterval ()”Metode:

funksjon blinkscreen ()
hvis (kropp.stil.BakgrunnColor === "White")
kropp.stil.BakgrunnColor = "#7AB0C4";

annet
kropp.stil.BakgrunnColor = "White";

Nå, påkalle “setInterval ()”Metode ved å passere den definerte funksjonen med en tidsforsinkelse som argumenter:

SetInterval (Blinkscreen, 800);

Det kan observeres at skjermen er blitt blinket ved å endre bakgrunnsfarge etter hver 800 millisekunder:

Eksempel 2: Blink abonnementsknappen

Du kan også bruke JavaScript for å blinke på skjermen ved å slå synligheten til et element på siden. I det gitte eksemplet vil vi blinke knappen på to måter.

Først må du lage en "Abonnere”-Knappen i en HTML -fil og tilordne en ID”abonnere”:

Abonnere

I tag, hent "Abonnere”-Knappen ved å bruke den tildelte IDen:

var knapp = dokument.getElementById ("Abonner");

Nå, definere en funksjon "BlinkSubScribeButton ()”Hvor vi vil endre fargen på knappen og kalle denne funksjonen i SetInterval () -metoden:

funksjon blinkSubScribeButton ()
hvis (knapp.stil.BakgrunnColor === "White")
knapp.stil.BakgrunnColor = "#7AB0C4";
annet
knapp.stil.BakgrunnColor = "White";

Pass den spesifiserte funksjonen og tidsforsinkelsen i SetInterval () -metoden som parametere:

SetInterval (BlinkSubScribeButton, 500);

Produksjon

I det neste gitte eksemplet, abonnementsknappen med IDen til “abonnere”Er opprinnelig skjult, og SetInterval () -metoden brukes til å veksle synligheten mellom skjult og synlig.

Lage en "Abonnere”-Knappen i en HTML -fil, og angi synligheten”skjult”:

Abonnere

Få referanse til knappen ved å bruke "getElementById ()”Metode:

var knapp = dokument.getElementById ("Abonner");

Ring "setInterval ()”Metode og i tilbakeringingsfunksjonen, vis knappen ved å stille synligheten til“synlig”, Og gi tidsforsinkelsen som et argument til SetInterval -metoden:

setInterval (funksjon ()
hvis (knapp.stil.synlighet === "skjult")
knapp.stil.synlighet = "synlig";
annet
knapp.stil.synlighet = "skjult";

, 500);

Som du kan se at abonnementsknappen slår på skjermen etter hver 500 millisekunder:

Eksempel 3: Blinker på skjermen ved hjelp av CSS

Du kan også bruke CSS -klassen til å blinke et hvilket som helst spesifikt element på websiden.

I det følgende eksempel vil vi blinke overskriften ved å tildele en CSS -klasse til den:

Blink skjermen

I stilark, lag en klasse “blinke”Og sett animasjonsstilen:

.blink
Animasjon: Blink 1S lineær uendelig;

Angi nøkkelrammer for blink -klassen ved å endre sin opacitet:

@KeyFrames blink
0% Opacity: 1;
50% Opacity: 0;
100% Opacity: 1;

Produksjon

Vi har samlet all nødvendig informasjon som er relevant for den blinkende skjermen i JavaScript.

Konklusjon

For å blinke på skjermen, bruk “setInterval ()”Metode ved å passere den spesifiserte funksjonen eller tilbakeringingsfunksjonen med tidsforsinkelse. Skjermblinking på nettsteder brukes vanligvis når nettstedet ønsker å trekke brukerens oppmerksomhet til et bestemt stykke informasjon eller handling. Denne opplæringen demonstrerte prosedyren for å blinke på skjermen i JavaScript.