Generator licznika odliczającego: darmowy kod HTML i React bez rejestracji | We.Inc
Stwórz licznik odliczający na swoją stronę. Ustaw datę i strefę czasową, wybierz styl i skopiuj czysty HTML lub komponent React. Bez konta, bez widgetu śledzącego, bez zewnętrznego skryptu.
Licznik odliczający na stronie co sekundę porównuje ustalony termin z zegarem odwiedzającego i pokazuje pozostałe dni, godziny, minuty i sekundy. Ustaw poniżej datę, godzinę i strefę czasową, wybierz styl i skopiuj samodzielny HTML lub komponent React. Kod działa na Twojej stronie bez skryptów zewnętrznych dostawców i bez konta.
Dwa rodzaje odliczania
Rodzaj
Termin
Do czego
Stała data
Ten sam moment dla wszystkich
Premiery, wydarzenia, wyprzedaże kończące się o prawdziwej godzinie
Dla każdego odwiedzającego
Ustalona liczba godzin od pierwszej wizyty danej osoby
Oferty powitalne, które naprawdę wygasają dla tej osoby
Wybierz datę i strefę czasową, do której należy termin, wybierz jeden z trzech stylów i kolor akcentu, a wynik zobaczysz na żywo poniżej. Otrzymasz jeden blok HTML, CSS i JavaScript albo komponent React z klasami Tailwind.
Wybierz datę i godzinę terminu, a potem jego strefę czasową. Kod zapisuje dokładny moment w UTC, więc odwiedzający z innych stref widzą prawidłowy pozostały czas.
Albo przełącz na odliczanie dla każdego odwiedzającego i wpisz, ile godzin dostaje każda osoba.
Wybierz styl i kolor akcentu oraz edytuj nagłówek i komunikat wyświetlany po upływie czasu.
Skopiuj kod HTML do osadzenia lub komponent React i wklej go tam, gdzie ma się pojawić licznik.
Pokazuj odliczanie tylko dla prawdziwego terminu. Liczniki, które się resetują lub nigdy nie kończą, wprowadzają odwiedzających w błąd, a amerykańska Federalna Komisja Handlu wymienia fałszywe odliczania wśród zwodniczych praktyk projektowych.
W komunikacie końcowym napisz, co dzieje się przy zerze, na przykład że wyprzedaż się skończyła lub wydarzenie się rozpoczęło, i dodaj link do następnego kroku.
Licznik korzysta z zegara urządzenia odwiedzającego. Jeśli ten zegar jest błędny, odliczanie też, więc nigdy nie używaj go jako jedynego zabezpieczenia prawdziwego terminu; egzekwuj terminy także na swoim serwerze.
Nie zasypuj czytników ekranu aktualizacjami co sekundę. Kod oznacza licznik rolą timer i aria-live off, aby nie ogłaszał każdego tyknięcia.
Najczęściej zadawane pytania
Jak dodać licznik odliczający do mojej strony?
Skopiuj kod HTML do osadzenia i wklej go na stronie w miejscu, gdzie ma się pojawić licznik. Większość kreatorów stron ma do tego blok HTML lub blok osadzania. Jeśli Twoja strona jest zbudowana w React, skopiuj zamiast tego komponent i renderuj go jak każdy inny komponent.
Czy licznik będzie poprawny dla odwiedzających z innych stref czasowych?
Tak. Narzędzie zamienia Twoją datę i strefę czasową w jeden dokładny moment w UTC i zapisuje tę liczbę w kodzie. Przeglądarka każdego odwiedzającego odlicza do tego samego momentu, niezależnie od jego czasu lokalnego.
Co robi opcja dla każdego odwiedzającego?
Uruchamia odliczanie każdej osoby przy jej pierwszej wizycie i zapisuje ten moment w jej przeglądarce, więc odświeżenie strony go nie restartuje. Wyczyszczenie danych strony lub zmiana urządzenia rozpoczyna nowe odliczanie, więc używaj tej opcji tylko dla ofert, które w takim przypadku chętnie honorujesz.
Czy mogę umieścić to odliczanie w e-mailu?
Nie. Programy pocztowe nie uruchamiają JavaScriptu. Odliczania w e-mailach to animowane obrazy generowane przez serwer w chwili otwarcia wiadomości, czego statyczna strona nie zapewni.
Dlaczego kod zapisuje UTC
Data taka jak 1 grudnia o 9:00 oznacza różne momenty w Toronto i w Karaczi. Zapisanie terminu jako znacznika czasu UTC usuwa tę niejednoznaczność, a do tego obsługuje zmiany czasu letniego, bo konwersja korzysta z reguł wybranej strefy dla tej konkretnej daty.
Skrypt przy każdym tyknięciu odejmuje bieżący czas od terminu i dzieli różnicę na dni, godziny, minuty i sekundy.
Jak licznik pozostaje dokładny i lekki
Przeglądarki spowalniają timery w kartach w tle, więc odliczanie, które po prostu odejmuje jedną sekundę przy każdym tyknięciu, zaczyna się rozjeżdżać. Ten kod za każdym razem przelicza czas na podstawie zegara i planuje następną aktualizację na początek kolejnej sekundy, więc pozostaje poprawny, gdy wracasz do karty.
Nie ma żadnej biblioteki ani zewnętrznego żądania, co sprawia, że strona jest szybka, a dane odwiedzających nie trafiają do dostawcy widgetu.