Aby stworzyć licznik w HTML, masz do dyspozycji kilka metod – od najprostszej numeracji, przez automatyczne liczniki CSS, aż po dynamiczne liczniki za pomocą JavaScript. W tym poradniku znajdziesz szczegółowe omówienie wszystkich podejść oraz praktyczne zastosowania.
Statyczny licznik – podstawowa numeracja
Najprostszym sposobem tworzenia licznika w HTML jest wykorzystanie listy numerowanej –
<ol>
<li>Pierwszy element</li>
<li>Drugi element</li>
<li>Trzeci element</li>
</ol>
Takie rozwiązanie sprawdzi się przy podstawowym zliczaniu punktów, np. w spisach treści lub listach zadań.
Automatyczne liczniki CSS
CSS oferuje znacznie więcej możliwości, zwłaszcza w przypadku bardziej złożonych zastosowań, takich jak rozbudowane, zagnieżdżone numeracje czy liczenie w dół.
Prosty licznik przy użyciu pseudoelementów
Możesz dodać automatyczny licznik do dowolnych elementów HTML dzięki poniższym krokom:
Przykład – numerowanie nagłówków
<body>
<h1>Wstęp</h1>
<h1>Rozdział 1</h1>
<h1>Rozdział 2</h1>
</body>
body { counter-reset: rozdzial; }
h1 { counter-increment: rozdzial; }
h1::before { content: counter(rozdzial) ". "; font-weight: bold; }
Co się tutaj dzieje?
- Tworzysz licznik o nazwie rozdzial przypisany do całej strony,
- każdy kolejny nagłówek h1 zwiększa licznik o jeden,
- numer pojawia się przed tekstem nagłówka, dzięki pseudoelementowi ::before.
Zagnieżdżone liczniki
Dla bardziej rozbudowanych struktur (np. 1, 1.1, 1.1.1):
<div>
<h1>Rozdział</h1>
<h2>Sekcja A</h2>
<h2>Sekcja B</h2>
<h1>Rozdział</h1>
<h2>Sekcja C</h2>
</div>
body { counter-reset: chapter; }
h1 { counter-increment: chapter; counter-reset: section; }
h1::before { content: counter(chapter) ". "; }
h2 { counter-increment: section; }
h2::before { content: counter(chapter) "." counter(section) " "; }
Efekt to automatyczne wyświetlanie numerowanych sekcji i podsekcji.
Liczenie w dół
Możesz również ustawić licznik z początkową wartością i odejmować przy każdym elemencie, tworząc licznik odliczający:
body { counter-reset: sekcja 5; /* licznik zaczyna od 5 */ }
h1 { counter-increment: sekcja -1; /* zmniejsza się o jeden */ }
h1::before { content: "Sekcja " counter(sekcja) ". "; color: brown; }
To przydatne np. w quizach lub odliczaniu czasu do zdarzenia.
Dynamiczny licznik w JavaScript
Niekiedy licznik musi być interaktywny – np. liczyć kliknięcia, punkty, ilość produktów w koszyku. Wtedy korzystamy z JavaScript.
Przykład – licznik kliknięć
<button id="btn">Kliknij mnie!</button>
<p>Liczba kliknięć: <span id="counter">0</span></p>
<script>
let count = 0;
document.getElementById('btn').addEventListener('click', function() {
count++;
document.getElementById('counter').textContent = count;
});
</script>
Za każdym razem, gdy użytkownik naciśnie przycisk, licznik się zwiększa.
Zastosowania liczników w projektach internetowych
- Spis treści – dynamiczna lub automatyczna numeracja rozdziałów i sekcji;
- Quizy i testy online – liczba pozostałych pytań lub prób;
- Statystyki – wyświetlanie liczby odwiedzin, polubień czy komentarzy;
- Nowoczesne prezentacje danych – odliczanie do premiery produktu, liczba sprzedanych sztuk, itp.;
- Checklisty i to-do listy – numery zadań w liście.
Podsumowanie
Możliwości tworzenia liczników w HTML i CSS są bardzo szerokie: od prostych, statycznych list do zaawansowanych liczników zagnieżdżonych lub dynamicznych, napędzanych JavaScript. Wybór metody zależy od konkretnego zastosowania oraz stopnia interaktywności, jakiej oczekujesz od swojego projektu. Dzięki licznikom możesz znacząco poprawić czytelność i funkcjonalność swoich stron internetowych.
