Hvordan lage en nedtellingstimer i JavaScript

Nedtellingstimere er en slags virtuelle klokker som teller tiden til en bestemt dato for å markere starten eller slutten av en spesiell anledning. De ble for det meste brukt på destinasjonssiden til nye kommende nettsteder, men nå har de funnet veien til e-handelsnettsteder.

"Tiden går tom" -elementet på nedtellingssidene er med på å skape presserende til å generere flere konverteringer på e-handelsnettsteder. Tidtakere kan også brukes på nettsteder eller blogger for å vise en nedtelling for spesielle arrangementer i.e. merkedager, bursdager, møter osv. Nedtellingstimere kan også brukes til å telle ned tiden til et tilbud blir tilgjengelig

I denne veiledningen vil vi lage en tidsteller i Vanilla JavaScript, i stedet for å bruke tredjepartsbiblioteker eller plugins. Fordelene med å skape nedtellingsklokken i Vanilla JavaScript er som følger:

• Koden er lettere fordi det ikke er noen avhengigheter.
• Forbedrer ytelsen til nettstedet, da det ikke er behov for å laste inn eksterne stiler og skript.

Hvordan lage en nedtellingstimer i JavaScript

Det grunnleggende i nedtellingstimeren er som følger:

Angi sluttdatoen for tidtakeren

Det første trinnet med å lage en nedtellingstimer er å angi sluttdatoen for tidtakeren. I dette trinnet vil vi erklære en variabel og tilordne den verdien av sluttdatoen for tidtakeren vår ved å bruke Dato gjenstand:

var enddate = ny dato ('20. august 2021 00:00:00').GetTime ();

I eksemplet ovenfor har vi brukt .GetTime () metode; Dette er fordi .GetTime () Metode konverterer datoen til et mer brukbart format. Det returnerer antall millisekunder som har gått siden midnatt 1. januar 1970, noe som gjør det lettere å utføre matematiske operasjoner på sluttdato variabel.

Lag en timing -begivenhetsfunksjon

Nå skal vi lage en setInterval () funksjon som gjentatte ganger vil utføre koden inne i den etter det angitte tidsintervallet. Dette er fordi vi ønsker å oppdatere tidtakeren etter hvert sekund:

var nedtellingtimer = setInterval (() =>
// All JavaScript -koden som er nevnt nedenfor, går inn i denne funksjonen
, 1000);

De setInterval () Funksjon tar intervallargumentet i millisekunder; Siden det er 1000 millisekunder i løpet av et sekund, og vi ønsker å oppdatere disken etter hvert sekund, har vi gitt 1000 som intervallet for timing -hendelsesfunksjonen.

Beregne tiden

Nå skal vi skrive kode inne i setInterval () funksjon. I dette trinnet vil vi beregne tiden som gjenstår til slutttiden for telleren:

var nå = ny dato ().GetTime ();
var gjenværende tid = enddate - nå;

Nå verdien av den gjenværende tiden som er til stede i variabelen gjenværende tid er i form av millisekunder, men vi vil vise det gjenværende antall dager, timer, minutter og sekunder, så vi må konvertere antall millisekunder til våre nødvendige tidsperioder:

const sekund = 1000;
const minutt = sekund * 60;
const time = minutt * 60;
Const Day = Hour * 24;
DaysLeft = matematikk.trunc (gjenværende tid / dag);
HourSleft = Matematikk.trunc ((gjenværende tid % dag) / time);
Minuttleft = Math.trunc ((gjenværende tid % time) / minutt);
SecondSleft = Math.trunc ((gjenværende tid % minutt) / sekund);

Det er 1000 millisekunder i løpet av et sekund, 60 000 millisekunder (1000*60) i løpet av et minutt, 3600 000 millisekunder (1000*60*60) på en time og 86.400.000 millisekunder (1000*60*60*24) på ​​en dag.

Vi har beregnet dagene igjen ved å dele mengden millisekunder som er til stede i gjenværende tid etter mengden millisekunder på en dag; Hvis det er 86.400.000 millisekunder igjen dager igjen vil være lik en (86.400.000/86.400.000), hvis det er 172.800.000 millisekunder igjen da dager igjen vil være lik 2 (172 800 000/86.400.000) og så videre. Antallet som returneres av (RestidTime / Day) -operasjonen vil oftest være et desimaltall, men vi trenger bare hele talldelen, så vi har brukt Matte.Trun () metode.

Å beregne timer igjen Vi ble først kvitt dagene ved å bruke modulusoperatøren. Så beregnet vi timene fra gjenværende tid. Vi kan beregne Minutesleft og Secondspleft variabler på samme måte.

Viser tidtakeren

I dette trinnet vil vi legge til litt kode (tagger) i HTML -kroppen; så får vi tilgang til disse taggene i setInterval () Funksjon og endre dem for å vise tidtakeren på websiden:

Inne i setInterval () funksjon:

dokument.QuerySelector ('#Days').indrehtml = DaysLeft + 'dager';
dokument.QuerySelector ('#timer').InnerHtml = HourSleft + 'Hours';
dokument.QuerySelector ('#minutter').indrehtml = minutterleft + 'minutter';
dokument.QuerySelector ('#Seconds').InnerHTML = SecondSleft + 'Seconds';

Nå vil vi legge til litt mer kode i setInterval () funksjon som vil bli utført i tilfelle tidtakeren er oppe:

hvis (gjenværende tid <= 0)
dokument.Skriv ('Time Up!');

Alt i alt HTML -filen for en nedtellingstimer skal se noe slikt ut:

En nedtellingstimer er laget med hell; Nå kan du style det ved å bruke CSS.

Konklusjon

Nedtellingstimere brukes av snart å være live nettsteder, så vel som mange netthandelsnettsteder. Nettstedene for e -handel bruker tidtakere for å overtale kunden til å ta raske beslutninger. Oppløsningen av dette innlegget var å utforske fremstilling av en nedtellingstimer i JavaScript.