ຕົວນັບ Tally ອອນໄລນ໌ ຟຣີ

ມັນເຮັດວຽກແນວໃດ

ຕົວນັບນີ້ເຮັດວຽກທັງໝົດຢູ່ໃນບຣາວເຊີຂອງທ່ານໂດຍໃຊ້ React state ແລະ localStorage API ໃນຕົວຂອງບຣາວເຊີ — ບໍ່ມີເຊີບເວີ, ບໍ່ມີບັນຊີ, ແລະ ບໍ່ມີຂໍ້ມູນຖືກສົ່ງໄປໃສ. ຕົວນັບຄົງຢູ່ຫຼັງໂຫຼດໜ້າຄືນໃໝ່ໂດຍອັດຕະໂນມັດ, ແລະ ໂໝດເຕັມໜ້າຈໍໃຊ້ Screen Wake Lock API ເພື່ອຮັກສາໜ້າຈໍໃຫ້ເປີດຢູ່ໃນລະຫວ່າງນັບ.

1. 1
   ສະຖານະຢູ່ໃນ localStorage

   ເມື່ອໜ້າໂຫຼດ, ເຄື່ອງມືອ່ານຕົວນັບທີ່ບັນທຶກໄວ້ກ່ອນໜ້າຈາກ localStorage ພາຍໃຕ້ຄີຄົງທີ່. ແຕ່ລະຕົວນັບ — ປ້າຍຊື່, ຄ່າປັດຈຸບັນ, ຂະໜາດຂັ້ນ, ແລະ ທຸງອະນຸຍາດຄ່າລົບ — ຖືກ serialize ເປັນ JSON ແລະ ຂຽນກັບຄືນໄປ localStorage ທຸກຄັ້ງທີ່ປ່ຽນແປງ, ດັ່ງນັ້ນຕົວນັບຂອງທ່ານຄົງຢູ່ຫຼັງການປິດແທັບໂດຍບັງເອີນ ຫຼືການໂຫຼດຄືນໃໝ່.
2. 2
   ເພີ່ມ/ຫຼຸດຜ່ານ React state

   ການແຕະ + ຫຼືປຸ່ມກາງໃຫຍ່ຈະເອີ້ນຕົວອັບເດດທີ່ບວກຄ່າຂັ້ນທີ່ຕັ້ງໄວ້ເຂົ້າກັບຄ່າປັດຈຸບັນຂອງຕົວນັບ. ຖ້າອະນຸຍາດຄ່າລົບປິດຢູ່, ຜົນລັບຈະຖືກຈຳກັດໃຫ້ເປັນສູນດ້ວຍ Math.max. ຄີລັດ (Space/+ ເພື່ອເພີ່ມ, -/Backspace ເພື່ອຫຼຸດ) ຖືກເຊື່ອມຕໍ່ຜ່ານ window keydown listener ທີ່ເລັງໃສ່ຕົວນັບໃດກໍໄດ້ທີ່ເຄື່ອນໄຫວຢູ່.
3. 3
   ໂໝດເຕັມໜ້າຈໍພ້ອມ Screen Wake Lock

   ການເຂົ້າໂໝດເຕັມໜ້າຈໍສະແດງຜົນທັບຊ້ອນທີ່ໜ້າຈໍທັງໝົດເປັນເປົ້າແຕະ. ພ້ອມກັນນັ້ນ, ເຄື່ອງມືຮ້ອງຂໍ wake lock ຜ່ານ navigator.wakeLock.request('screen') — API ບຣາວເຊີທີ່ຂໍໃຫ້ OS ຢຸດການປິດໜ້າຈໍ. ລ໋ອກຈະຖືກຮ້ອງຂໍຄືນອັດຕະໂນມັດຖ້າແທັບໄດ້ຮັບການເບິ່ງເຫັນຄືນຫຼັງຈາກຢູ່ພື້ນຫຼັງ.
4. 4
   ຕົວນັບຫຼາຍອັນພ້ອມຜົນລວມ

   ການເພີ່ມຕົວນັບທີສອງສ້າງລາຍການໃໝ່ດ້ວຍ ID ທີ່ສ້າງໂດຍ crypto.randomUUID(). ເມື່ອມີຕົວນັບຫຼາຍກວ່າໜຶ່ງອັນ, ຜົນລວມຖືກຄິດໄລ່ໂດຍການບວກທຸກຄ່າ ແລະ ສະແດງເໜືອລາຍການຕົວນັບ. ແຕ່ລະຕົວນັບມີການຕັ້ງຄ່າຂັ້ນ, ຣີເຊັດ, ແລະ ອະນຸຍາດຄ່າລົບແຍກກັນ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ