"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:
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 (() =>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 ();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;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';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)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.