Tiešsaistes uzskaites skaitītājs bez maksas

Kā tas darbojas

Šis skaitītājs darbojas pilnībā jūsu pārlūkprogrammā, izmantojot React stāvokli un pārlūkprogrammas iebūvēto localStorage API — nav servera, nav konta, un dati nekur netiek sūtīti. Skaitītāji saglabājas pēc lapas atsvaidzināšanas automātiski, un pilnekrāna režīms izmanto Screen Wake Lock API, lai turētu ekrānu ieslēgtu skaitīšanas laikā.

1. 1
   Stāvoklis tiek glabāts localStorage

   Kad lapa ielādējas, rīks nolasa iepriekš saglabātos skaitītājus no localStorage zem fiksētas atslēgas. Katrs skaitītājs — tā nosaukums, pašreizējā vērtība, solis un negatīvo vērtību atļaušanas karogs — tiek serializēts kā JSON un ierakstīts atpakaļ localStorage ar katru izmaiņu, tāpēc jūsu skaitītāji izdzīvo nejaušu cilnes aizvēršanu vai atsvaidzināšanu.
2. 2
   Palielināšana/samazināšana caur React stāvokli

   Pieskaršanās + vai lielajai centrālajai pogai izsauc atjauninātāju, kas pievieno konfigurēto soļa vērtību skaitītāja pašreizējai vērtībai. Ja negatīvo vērtību atļaušana ir izslēgta, rezultāts tiek ierobežots ar nulli, izmantojot Math.max. Tastatūras saīsnes (Atstarpe/+ palielināšanai, -/Backspace samazināšanai) ir savienotas caur loga keydown klausītāju, kas mērķē uz aktīvo skaitītāju.
3. 3
   Pilnekrāna režīms ar Screen Wake Lock

   Ieejot pilnekrāna režīmā, tiek renderēts pārklājums, kur viss ekrāns ir pieskāriena mērķis. Vienlaicīgi rīks pieprasa nomoda bloķējumu, izmantojot navigator.wakeLock.request('screen') — pārlūkprogrammas API, kas lūdz OS nomākt ekrāna miegu. Bloķējums tiek atkārtoti iegūts automātiski, ja cilne atgūst redzamību pēc atrašanās fonā.
4. 4
   Vairāki skaitītāji ar kopējo summu

   Otra skaitītāja pievienošana rada jaunu ierakstu ar crypto.randomUUID() ģenerētu ID. Kad pastāv vairāk nekā viens skaitītājs, kopējā summa tiek aprēķināta, summējot visas vērtības, un tiek parādīta virs skaitītāju saraksta. Katram skaitītājam ir neatkarīgi soļa, atiestatīšanas un negatīvo vērtību atļaušanas iestatījumi.

Saistītie rīki