Libreng Online na Tally Counter

Paano ito Gumagana

Buong tumatakbo ang tally counter na ito sa iyong browser gamit ang React state at ang built-in na localStorage API ng browser — walang server, walang account, at walang data na ipinapadala kahit saan. Awtomatikong nananatili ang mga bilang kahit i-refresh ang pahina, at ginagamit ng fullscreen mode ang Screen Wake Lock API para manatiling bukas ang display habang nagbibilang.

1. 1
   Nasa localStorage ang state

   Pag-load ng pahina, binabasa ng tool ang anumang dating naka-save na counter mula sa localStorage sa ilalim ng nakapirming key. Ang bawat counter — ang label, kasalukuyang halaga, step size, at allow-negative flag — ay sine-serialize bilang JSON at isinusulat pabalik sa localStorage sa bawat pagbabago, kaya nananatili ang mga bilang mo kahit aksidenteng maisara o ma-refresh ang tab.
2. 2
   Increment/decrement gamit ang React state

   Kapag tinap ang + o ang malaking button sa gitna, tinatawag ang isang updater na nagdadagdag ng naka-configure na step value sa kasalukuyang halaga ng counter. Kung naka-off ang allow-negative, kina-clamp ang resulta sa zero gamit ang Math.max. Ang mga keyboard shortcut (Space/+ para magdagdag, -/Backspace para magbawas) ay nakakabit sa isang window keydown listener na tumutukoy sa aktibong counter.
3. 3
   Fullscreen mode na may Screen Wake Lock

   Kapag pumasok sa fullscreen mode, nagre-render ng overlay kung saan ang buong screen ang tap target. Kasabay nito, humihingi ang tool ng wake lock sa pamamagitan ng navigator.wakeLock.request('screen') — isang browser API na humihiling sa OS na pigilan ang pagtulog ng screen. Awtomatikong kinukuha ulit ang lock kapag nakita ulit ang tab matapos itong mapunta sa background.
4. 4
   Maraming counter na may pinagsamang kabuuan

   Kapag nagdagdag ng ikalawang counter, gumagawa ito ng bagong entry na may ID mula sa crypto.randomUUID(). Kapag higit sa isa ang counter, kinakalkula ang pinagsamang kabuuan sa pagsuma ng lahat ng halaga at ipinapakita sa itaas ng listahan ng counter. May sariling step, reset, at allow-negative na setting ang bawat counter.

Mga Kaugnay na Tool