เครื่องนับออนไลน์ ฟรี

วิธีการทำงาน

ตัวนับนี้ทำงานในเบราว์เซอร์ทั้งหมดโดยใช้ React state และ localStorage API ในตัวของเบราว์เซอร์ — ไม่มีเซิร์ฟเวอร์ ไม่มีบัญชี และไม่มีข้อมูลถูกส่งไปที่ใด จำนวนที่นับจะคงอยู่หลังรีเฟรชหน้าโดยอัตโนมัติ และโหมดเต็มหน้าจอใช้ Screen Wake Lock API เพื่อให้หน้าจอเปิดอยู่ขณะนับ

1. 1
   สถานะเก็บใน localStorage

   เมื่อหน้าโหลด เครื่องมือจะอ่านตัวนับที่บันทึกไว้ก่อนหน้าจาก localStorage ภายใต้คีย์คงที่ ตัวนับแต่ละตัว — ป้ายชื่อ ค่าปัจจุบัน ขนาดขั้น และแฟล็กอนุญาตค่าติดลบ — ถูกแปลงเป็น JSON และเขียนกลับไปยัง localStorage ทุกครั้งที่เปลี่ยน จำนวนที่นับจึงคงอยู่แม้ปิดแท็บหรือรีเฟรชโดยไม่ตั้งใจ
2. 2
   เพิ่ม/ลดผ่าน React state

   การแตะ + หรือปุ่มใหญ่ตรงกลางจะเรียกฟังก์ชันอัปเดตที่บวกค่าขั้นที่ตั้งไว้เข้ากับค่าปัจจุบันของตัวนับ หากปิดการอนุญาตค่าติดลบ ผลลัพธ์จะถูกจำกัดไว้ที่ศูนย์ด้วย Math.max แป้นลัด (Space/+ เพื่อเพิ่ม, -/Backspace เพื่อลด) เชื่อมผ่านตัวรับ keydown ของ window ที่ทำงานกับตัวนับที่กำลังใช้งาน
3. 3
   โหมดเต็มหน้าจอพร้อม Screen Wake Lock

   การเข้าสู่โหมดเต็มหน้าจอจะแสดงเลเยอร์ซ้อนที่ทั้งหน้าจอเป็นพื้นที่แตะ พร้อมกันนั้นเครื่องมือจะขอ wake lock ผ่าน navigator.wakeLock.request('screen') — API ของเบราว์เซอร์ที่ขอให้ระบบปฏิบัติการไม่ปิดหน้าจอ ล็อกจะถูกขอใหม่โดยอัตโนมัติเมื่อแท็บกลับมาแสดงหลังจากอยู่เบื้องหลัง
4. 4
   ตัวนับหลายตัวพร้อมผลรวม

   การเพิ่มตัวนับตัวที่สองจะสร้างรายการใหม่ที่มี ID จาก crypto.randomUUID() เมื่อมีตัวนับมากกว่าหนึ่งตัว ผลรวมจะคำนวณโดยบวกค่าทั้งหมดและแสดงเหนือรายการตัวนับ ตัวนับแต่ละตัวมีการตั้งค่าขั้น รีเซ็ต และอนุญาตค่าติดลบแยกกัน

เครื่องมือที่เกี่ยวข้อง