ຂ້າມໄປຫາເນື້ອຫາຫຼັກ

ຖິ້ມເຫຼື້ອຍ & ໝຸນລໍ້ ຟຣີ

ໂຍນຫຼຽນເສມືນ, ໝຸນວົງລໍ້ທີ່ປັບແຕ່ງໄດ້, ຫຼື ສຸ່ມເລືອກຈາກລາຍການຕົວເລືອກ. ໃຊ້ຄວາມສຸ່ມທີ່ປອດໄພທາງລະຫັດລັບຂອງບຣາວເຊີທ່ານ — ບໍ່ແມ່ນການຈັບສະຫຼາກສາທາລະນະທີ່ກວດສອບໄດ້, ດັ່ງນັ້ນຄວນຫຼີກລ່ຽງການແຂ່ງຂັນທີ່ມີກົດລະບຽບຄວບຄຸມ.

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ

🔒 ທັງສາມອັນໃຊ້ random generator ທີ່ປອດໄພທາງ cryptographically ຂອງ browser: ໄປ້ຕົວຜົນໄດ້ຮັບການເລືອກກ່ອນ, ຈາກນັ້ນ animated — ລະບົາສະກຸນແມ່ນ ສາກ ຕົວ 50/50, ວົງກົມ ໄປວົງກົມທີ່ໄດ້ຄັດເລືອກແລ້ວ, ຫາກ ລາະກາ ບໍ່ມີອະຄະນາດ. ບໍ່ຢູ່ໂພ້ຕາມ. ນີ້ຍາວກົນມາກໄປ ສໍາລັບການໃຊ້ອະວັນນະວັນ, ແຕ່ບໍ່ມີການແຕ້ມຕົວ ທີ່ ໂພຣບາບລາດ, ສະນັ້ນຈົ່ງລະວັງໂຕ້ຖຽງທີ່ມີກົດລະບຽບ ຫຼື ການຕັດສິນໃຈທີ່ມີມູນຄ່າສູງ.

ການນຳໃຊ້ທົ່ວໄປ

  • ຖົກກະປະປະເພື່ອເອົາໃຈໃສ່ໃຊ້ fair virtual coin flip ເພື່ອເອົາວາລະຍາວປະເມີນ unbiased decisions ເມື່ອທ່ານຕິດໄປມາລະຫວ່າງສອງຕົວທາງ
  • Spin Wheel ສໍາລັບ Random Team Assignmentsໃຊ້ customizable spin wheel ເພື່ອກົາໄກ່ random team members ໄປ tasks roles ຫຼື groups
  • Random Student Picker ສໍາລັບ Classroomsໃຊ້ spin wheel ຫຼື option picker ເພື່ອ randomly call on students assign groups ຫຼື pick volunteers
  • Virtual Coin Flip ສໍາລັບ Sportsຖົກ fair coin ເພື່ອກໍານົດ team sides first possession serve order ຫຼື sports decisions ອື່ນໆ
  • Random Picker ສໍາລັບ Giveawaysເລືອກ random winner ຈາກລາຍການ entries ໂດຍໃຊ້ Option Picker - transparent ແລະ fair

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

ທັງສາມໂໝດ — ໂຍນຫຼຽນ, ໝູນລໍ້, ແລະ ຕົວເລືອກ — ໃຊ້ Web Crypto API ໃນຕົວຂອງບຣາວເຊີ (crypto.getRandomValues) ເພື່ອສ້າງຜົນລັບຜູ້ຊະນະ, ແລ້ວຂັບແອນິເມຊັນທັງໝົດຝັ່ງລູກຄ້າດ້ວຍ CSS transforms ແລະ requestAnimationFrame. ບໍ່ມີເຊີບເວີກ່ຽວຂ້ອງໃນຈຸດໃດ.

  1. 1
    Web Crypto ເລືອກຜູ້ຊະນະ
    ກ່ອນແອນິເມຊັນເລີ່ມ, crypto.getRandomValues ຕື່ມ Uint32Array ດ້ວຍຈຳນວນເຕັມ 32-ບິດແບບ cryptographically random. ການດຳເນີນການ modulo ຈັບຄູ່ມັນກັບຈຳນວນຕົວເລືອກ (2 ສຳລັບຫົວ/ກ້ອຍ, N ສຳລັບລໍ້ ຫຼືຕົວເລືອກ), ດັ່ງນັ້ນທຸກຜົນລັບມີຄວາມເປັນໄປໄດ້ເທົ່າກັນພໍດີ.
  2. 2
    ມູມການໝູນຖືກຄິດໄລ່ໃຫ້ລົງເທິງຜົນລັບ
    ສຳລັບຫຼຽນ, ໂຄ້ດຄິດໄລ່ການໝູນເພີ່ມທີ່ສັ້ນທີ່ສຸດ (ເທິງມູມສະສົມປັດຈຸບັນ) ທີ່ຈົບດ້ວຍໜ້າທີ່ຖືກຕ້ອງຫງາຍ — ຫົວທີ 0°, ກ້ອຍທີ 180° — ແລ້ວເພີ່ມ 5 ຮອບເຕັມດັ່ງນັ້ນມັນເບິ່ງຄືການໝູນຈິງ. ລໍ້ເຮັດຄືກັນ: ມັນຊອກຫາຄ່າຫ່າງມູມທີ່ນຳຊິ້ນຊະນະໄປໃຕ້ຕົວຊີ້, ເພີ່ມ 6 ຮອບເຕັມ, ແລະ ນຳໃຊ້ jitter ແບບສຸ່ມນ້ອຍໆ ດັ່ງນັ້ນຕົວຊີ້ບໍ່ຢຸດຢູ່ຈຸດກາງພໍດີຂອງຊິ້ນສະເໝີ.
  3. 3
    CSS transitions ແລະ requestAnimationFrame ຂັບແອນິເມຊັນ
    ຫຼຽນ ແລະ ລໍ້ ເຮັດແອນິເມຊັນຜ່ານ CSS transform ພ້ອມເສັ້ນໂຄ້ງ easing cubic-bezier ນຳໃຊ້ກັບຄ່າການໝູນສະສົມດຽວ — ບໍ່ຕ້ອງການ JavaScript ຕໍ່ກອບເມື່ອມູມຖືກຕັ້ງແລ້ວ. ຕົວເລືອກໃຊ້ requestAnimationFrame ແທນ: ແຕ່ລະກອບ, ຊ່ວງທີ່ເຕີບໂຕແບບ quadratic ກຳນົດວ່າຈະເລື່ອນການເນັ້ນຫຼືບໍ່, ຜະລິດການຫຼຸດຄວາມໄວແບບເຄື່ອງເກມທີ່ຢຸດຢູ່ຜູ້ຊະນະທີ່ກຳນົດໄວ້ລ່ວງໜ້າສະເໝີ.
  4. 4
    ຜົນລັບຖືກເປີດເຜີຍ ແລະ ບັນທຶກໃນປະຫວັດເຊດຊັນ
    setTimeout ຖືກໂຍນເມື່ອແອນິເມຊັນສຳເລັດ (1.3 ວິນາທີສຳລັບຫຼຽນ, 4.3 ວິນາທີສຳລັບລໍ້) ແລະ ຂຽນຜົນລັບໄປ state. ໂໝດຫຼຽນຮັກສາປະຫວັດເຊດຊັນທີ່ດຳເນີນຢູ່ເຖິງ 24 ຄັ້ງ ພ້ອມການນັບຫົວ/ກ້ອຍ. ຜູ້ໃຊ້ທີ່ເປີດ prefers-reduced-motion ຂ້າມແອນິເມຊັນທັງໝົດ ແລະ ເຫັນຜົນລັບທັນທີ.

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

ຄໍາຖາມທີ່ຖາມເລື້ອຍໆ