logo

Jak vytvořit odpočítávání data pomocí JavaScriptu Vanilla

Úvod

Odpočítávací měřič jsou virtuální hodiny, které začínají (nebo zastavují) odpočítávání od určitého data pro označení začátku (nebo konce) události. Běžně se používají na vstupní stránce webových stránek elektronického obchodu, na webových stránkách ve výstavbě, na stránkách akcí a na mnoha dalších místech.

Obvykle se používají k narozeninám, odpočítávání do Nového roku, propagačním akcím a dokonce i ke sportu. Hlavním cílem odpočítávacího časovače je podnítit lidi k akci , než bude příliš pozdě – například nákup zboží nebo služeb, předvídání události a registrace na událost a tak dále.

V podstatě bychom si předem zarezervovali určitý termín. Poté pomocí JavaScriptu můžeme odečíst aktuální datum od zadaného data, což se provádí každou sekundu, minutu nebo hodinu.

Poznámka: Zdrojový kód aplikace lze také nalézt na GitHubu.

Vytvoření odpočítávání data pomocí JavaScriptu

Doporučuje se, abyste rozuměli tomu, jak vytvořit odpočítávací časovač pouze pomocí JavaScriptu, spíše než předem vytvořeného řešení nebo pluginu, pokud nepotřebujete přidat nějaké specifičtější funkce, o které je lepší se postarat s knihovnou než od začátku.

Vzhledem k tomu, že nemá žádné závislosti, jeho vytvoření pomocí JavaScriptu Vanilla vám umožní mít jednoduchý kód – váš web nebude navíc zatěžován a nebudete muset načítat externí skripty a šablony stylů. Budete mít větší kontrolu, což znamená, že budete moci navrhnout časovač tak, aby se choval a vypadal přesně tak, jak chcete, místo abyste se pokoušeli ohýbat plugin podle své vůle.

Začínáme

Pojďme nastavit cílové datum, které bude fungovat jako den události vytváříme odpočet pro. Toto datum můžete také vytvořit dynamicky na základě parametrů, jako je vytvoření odpočítávání pro uživatele k ověření jeho e-mailové adresy.

Kvůli stručnosti nastavíme statické datum:

let interval;
const eventDay = new Date('03/03/2022');

Poznámka: Date konstruktor přebírá data ve formátu (MM/DD/RRRR). Máme také prázdné interval pro pozdější přiřazení.

Nastavíme také několik konstantních hodnot. Obvykle se práce s časem (na stupnici sekund) provádí v milisekundách a většina metod/příkazů přijímá a vrací milisekundu hodnoty.

Na základě toho definujme dobu trvání second , minute , hour a day , takže je můžeme v případě potřeby použít pro odpočítávání:

const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
Vytvoření funkce odpočítávání

Nyní k jádru logiky – funkci odpočítávání!

const countDownFn = () => {
   // All logic goes in
}

V závislosti na tom, jak často chcete, aby se časovač aktualizoval – každou sekundu, minutu nebo hodinu, budete funkci volat v příslušných intervalech :

everySecond = setInterval(countDownFn, second)
everyMinute = setInterval(countDownFn, minute)
everyHour = setInterval(countDownFn, hour)

Nyní získáme aktuální datum a poté jej odečteme od eventDay (v budoucnu), abyste poznali rozdíl mezi nimi. Na základě tohoto rozdílu pak budeme vědět, kolik horkých dní, hodin, minut a sekund zbývá:

let now = new Date();
let timeSpan = eventDay - now;

Poznámka: Je důležité umístit instanci pro aktuální čas (now ) uvnitř funkce odpočítávání, protože „aktuální čas“ se neustále mění. Když zavoláme funkci pro aktualizaci časovače, získá aktuální čas. Za druhé, používáme let místo const, protože se hodnota mění každou sekundu.

Nakonec přidáme kontrolu, zda nastal den akce nebo ne! Jakmile dosáhne nuly, již není třeba odpočítávat. K tomu použijeme if-elseif prohlášení.

Nejprve implementujme if příkaz ke kontrole, zda den události nastavený uživatelem již není v minulosti:

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

if (timeSpan <= -today) {
  console.log("Unfortunately we have past the event day");
  clearInterval(interval);
}

Pokud timeSpan , výsledek odečtení aktuálního data a času od eventDay je menší nebo rovno kdykoliv po dnešku – je záporné, nebo spíše v minulosti.

Nakonec - zkontrolujeme, zda má odpočítávání skončit:

else if (timeSpan <= 0) {
  console.log("Today is the event day");
  clearInterval(interval);
  return;
}

clearInterval() funkce vymaže interval, takže tato logika není znovu volána v každém intervalu (sekundě, minutě atd.).

Nakonec můžeme vypočítat zbývající počet sekund, minut, hodin a dní, pokud obě předchozí kontroly vyhodnotí hodnotu false :

else {
  const days = Math.floor(timeSpan / day)
  const hours = Math.floor((timeSpan % day) / hour)
  const minutes = Math.floor((timeSpan % hour) / minute)
  const seconds = Math.floor((timeSpan % minute) / second)

  console.log(days + ":" + hours + ":" + minutes + ":" + seconds);
}

Namísto tisku na konzoli – pojďme vytvořit jednoduchou HTML stránku pro zobrazení výsledků!

Stránka HTML

Vytvořme malou stránku pro zobrazení výsledků. Budeme chtít mít nějaký prvek pro, řekněme, den , hodina , minuta a druhý :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>JS Countdown Timer</title>
	</head>
	<body>
		<div class="date-countdown-container">
			<h2 id="day">0</h2>
			<p>:</p>
			<h2 id="hour">0</h2>
			<p>:</p>
			<h2 id="minute">0</h2>
			<p>:</p>
			<h2 id="second">0</h2>
		</div>
		<script src="./app.js"></script>
	</body>
</html>

app.js skript obsahuje veškerý kód, včetně countDownFn() . Nyní můžeme změnit výstup funkce tak, aby se hodnoty netiskly do konzole, ale změnily se day , hour , minute a second divs:

let dayField = document.getElementById('day');
let hourField = document.getElementById('hour');
let minuteField = document.getElementById('minute');
let secondField = document.getElementById('second');

// Constants and countDownFn
const countDownFn = () => {...}

// Set results
dayField.innerHTML = days;
hourField.innerHTML = hours;
minuteField.innerHTML = minutes;
secondField.innerHTML = seconds;

Tohle by mělo fungovat dobře! Nicméně, to není opravdu stylizované. Pojďme do toho a přidejte nějaké CSS, aby to bylo mnohem hezčí na pohled.

CSS – styling odpočítávacího časovače

Pojďme přidat trochu stylu do časovače! Přidáme hezčí písmo, změníme barvu pozadí, zcentrujeme prvky a vložíme je do stylizovaných kontejnerů se stíny:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: 'Poppins', sans-serif;
  height: 100vh;
  width: 100%;
  background: rgb(175, 90, 90);
  display: flex;
  justify-content: center;
  align-items: center;
}

.date-countdown-container{
  display: flex;
  align-items: center;
  gap: 30px;
}

.date-countdown-container h2{
  background-color: #ddd;
  padding: 20px;
  border-radius: 10px;
  border: 5px solid #fff;
  -webkit-box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0); 
  box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
}

.date-countdown-container p{
  background-color: #ddd;
  padding: 2px;
  border-radius: 10px;
  border: 2px solid #fff;
  -webkit-box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0); 
  box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
}

Tím je hotovo – přidejte šablonu stylů do <head> souboru HTML:

<link rel="stylesheet" href="style.css"/>

Spuštění aplikace

Konečně – můžeme spustit aplikaci!

Používáte soubor Moment.js?

Pokud již používáte Moment.js – není na škodu jej použít i pro toto. Není absolutně nutné mít závislost, pokud ji nepotřebujete pro něco jiného, ​​ale nabízí užitečný diff() funkce:

const eventDay = moment("2023-06-03");
const now = moment();
const timeSpan = eventDay.diff(now);

Jednoduše řečeno, tyto tři řádky jsou hlavními proměnnými, které pomáhají při provádění odpočítávání, a jsou to proměnné, které buď zadáte nebo umožníte získat z programu, v tomto případě z Moment.js.

Pokud byste měli nahradit logiku řízení času původního kódu tímto – obsahovalo by:


let dayField = document.getElementById('day');
let hourField = document.getElementById('hour');
let minuteField = document.getElementById('minute');
let secondField = document.getElementById('second');

let interval;
const eventDay = moment("2023-06-03");
  
// Convert to milisecond
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
  
const countDownFn = () => {
    const today = moment();
    const timeSpan = eventDay.diff(today);
  
    if (timeSpan <= -today) {
        console.log("Unfortunately we have past the event day");
        clearInterval(interval);
        return;
    } else if (timeSpan <= 0) {
        console.log("Today is the event day");
        clearInterval(interval);
        return;
    } else {
        const days = Math.floor(timeSpan / day);
        const hours = Math.floor((timeSpan % day) / hour);
        const minutes = Math.floor((timeSpan % hour) / minute);
        const seconds = Math.floor((timeSpan % minute) / second);
  
        // Set results
        dayField.innerHTML = days;
        hourField.innerHTML = hours;
        minuteField.innerHTML = minutes;
        secondField.innerHTML = seconds;
    }
};
  
interval = setInterval(countDownFn, second);

Závěr

V tomto praktickém průvodci jsme se naučili, jak si vytvořit vlastní odpočítávací časovač pouze pomocí krátkého skriptu JavaScript, a upravili jsme stránku HTML tak, aby zobrazovala odpočítávání, a také jak používat Moment.js k provádění aritmetiky času.