Contador de marcas en liña de balde

Como funciona

Este contador execútase enteiramente no teu navegador usando o estado de React e a API localStorage integrada do navegador — non hai servidor, nin conta, nin datos enviados a ningures. Os contadores sobreviven ás recargas de páxina automaticamente, e o modo de pantalla completa usa a API Screen Wake Lock para manter a pantalla acesa mentres contas.

1. 1
   O estado vive en localStorage

   Cando a páxina carga, a ferramenta le calquera contador gardado previamente en localStorage baixo unha clave fixa. Cada contador — a súa etiqueta, valor actual, tamaño de paso e indicador de permitir negativos — sérializase como JSON e escríbese de novo en localStorage con cada cambio, así que os teus contadores sobreviven a peches accidentais de pestana ou recargas.
2. 2
   Incremento/decremento mediante o estado de React

   Tocar + ou o botón grande central chama a unha función que engade o valor de paso configurado ao valor actual do contador. Se permitir negativos está desactivado, o resultado limítase a cero con Math.max. Os atallos de teclado (Espazo/+ para incrementar, -/Retroceso para decrementar) conéctanse a través dun escoitador keydown da xanela que apunta ao contador activo.
3. 3
   Modo de pantalla completa con Screen Wake Lock

   Entrar en modo de pantalla completa renderiza unha superposición onde toda a pantalla é a zona de toque. Ao mesmo tempo, a ferramenta solicita un bloqueo de activación mediante navigator.wakeLock.request('screen') — unha API do navegador que pide ao sistema operativo que suprima o apagado de pantalla. O bloqueo adquírese de novo automaticamente se a pestana recupera a visibilidade despois de estar en segundo plano.
4. 4
   Varios contadores co total combinado

   Engadir un segundo contador crea unha nova entrada cun ID xerado con crypto.randomUUID(). Cando hai máis dun contador, calcúlase un total combinado sumando todos os valores e móstrase enriba da lista de contadores. Cada contador ten configuracións independentes de paso, reinicio e permitir negativos.

Ferramentas relacionadas