Aby stworzyć licznik w HTML, można wykorzystać zarówno czysty HTML z pomocą CSS (liczniki CSS), jak i HTML połączony z JavaScriptem (dynamiczne liczniki czasu, odwiedzin, kliknięć itp.). W tym poradniku znajdziesz szczegółowe instrukcje oraz praktyczne przykłady do różnych zastosowań liczników.
Licznik przy użyciu CSS (liczniki CSS)
Automatyczna numeracja elementów bez <ol>
CSS pozwala na numerowanie dowolnych elementów, nie tylko listy. Przykładem jest numerowanie nagłówków, sekcji czy akapitów – przy użyciu właściwości counter-reset, counter-increment oraz pseudoelementu ::before.
Przykład: numerowanie nagłówków
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Licznik CSS – Przykład</title>
<style>
body { counter-reset: sekcja; }
h2 { counter-increment: sekcja; }
h2::before {
content: counter(sekcja) ". ";
font-weight: bold;
color: #0074d9;
}
</style>
</head>
<body>
<h2>Sekcja pierwsza</h2>
<h2>Sekcja druga</h2>
<h2>Sekcja trzecia</h2>
</body>
</html>
Efektem będzie automatyczne numerowanie sekcji bez użycia listy numerowanej.
Licznik zagnieżdżony (np. 1.1, 1.2.1)
CSS obsługuje także zagnieżdżone liczniki. To pozwala na generowanie wielopoziomowej numeracji, np. rozdziałów i podrozdziałów.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zagnieżdżone liczniki CSS</title>
<style>
body { counter-reset: rozdzial; }
h1 {
counter-increment: rozdzial;
counter-reset: podrozdzial;
}
h1::before {
content: counter(rozdzial) ". ";
font-size: 120%;
font-weight: bold;
}
h2 { counter-increment: podrozdzial; }
h2::before {
content: counter(rozdzial) "." counter(podrozdzial) " ";
font-style: italic;
}
</style>
</head>
<body>
<h1>Wstęp</h1>
<h2>Cel poradnika</h2>
<h2>Zakres</h2>
<h1>Instalacja</h1>
<h2>Pobieranie</h2>
<h2>Konfiguracja</h2>
</body>
</html>
Efektem będą nagłówki z numeracją typu 1.1, 1.2, 2.1 itd.
Licznik w dół (np. odliczanie)
Licznik CSS można skonfigurować do odliczania w dół przez ustawienie startowej wartości i użycie ujemnej inkrementacji.
body { counter-reset: sekcja 5; }
h2 { counter-increment: sekcja -1; }
h2::before {
content: counter(sekcja) ". ";
color: crimson;
}
Dodając kilka nagłówków <h2>, będą one numerowane od 5 do 1.
Licznik dynamiczny z użyciem JavaScript
CSS świetnie sprawdza się do statycznej numeracji elementów na stronie. Gdy chcesz zbudować licznik dynamiczny – np. licznik czasu, odwiedzin, kliknięć, itp. – użyj JavaScriptu.
Licznik kliknięć
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Licznik kliknięć</title>
<style>
#counter {
font-size: 2em;
color: #28a745;
margin-left: 10px;
}
</style>
</head>
<body>
<button id="button">Kliknij mnie</button>
<span id="counter">0</span>
<script>
let count = 0;
document.getElementById('button').onclick = function() {
count++;
document.getElementById('counter').innerText = count;
};
</script>
</body>
</html>
Wartość licznika zwiększa się o jeden przy każdym kliknięciu w przycisk.
Licznik czasu (odliczanie do zdarzenia)
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Licznik czasu JavaScript</title>
<style>
#timer {
font-size: 2em;
color: #e67e22;
}
</style>
</head>
<body>
<div>
Czas do końca: <span id="timer">10</span> sekund
</div>
<script>
let timeLeft = 10;
const timerSpan = document.getElementById('timer');
const countdown = setInterval(function() {
if (timeLeft > 0) {
timeLeft--;
timerSpan.textContent = timeLeft;
} else {
clearInterval(countdown);
timerSpan.textContent = 'Koniec!';
}
}, 1000);
</script>
</body>
</html>
Ten kod odlicza od 10 do 0, a na końcu wyświetla komunikat „Koniec!”.
Licznik odwiedzin strony (przykład lokalny)
Możesz przechowywać liczbę odwiedzin w LocalStorage przeglądarki.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Licznik odwiedzin</title>
</head>
<body>
<div> Liczba odwiedzin: <span id="visit-count"></span> </div>
<script>
let visits = localStorage.getItem('visitCount');
visits = visits ? parseInt(visits) + 1 : 1;
localStorage.setItem('visitCount', visits);
document.getElementById('visit-count').textContent = visits;
</script>
</body>
</html>
Każde odświeżenie strony zwiększa licznik o 1 (działa tylko w obrębie tej przeglądarki i urządzenia).
Zastosowania liczników w HTML i CSS/JS
- Automatyczna numeracja sekcji, punktów instrukcji, podrozdziałów;
- Licznik kliknięć w interaktywnych elementach (np. quizy, głosowania);
- Odliczanie czasu (np. oferty limitowane, quizy z czasem, timer do premiery);
- Licznik odwiedzin strony lub elementu;
- Liczba dostępnych miejsc/produktów w sklepie internetowym;
- Zamówienia: pokazanie kolejki, postępu itp..
Podsumowanie
Możliwości implementacji liczników w HTML są bardzo szerokie, zarówno przy pomocy CSS (prosta numeracja, nawet zagnieżdżona lub malejąca), jak i JavaScript (interaktywność, dynamiczne dane). Sposób realizacji zależy od potrzeb projektu – od prostych dekoracji, po zaawansowane narzędzia interaktywne.
