cari
Rumahhujung hadapan webtutorial cssBolehkah saya Memandu? Pengekodan Penguji Alkohol

Di Denmark, tempat saya tinggal, malangnya kami memegang rekod di Eropah: anak-anak kami adalah peminum alkohol paling banyak di benua itu. Oleh sebab itu, terdapat tumpuan yang kuat untuk mengurangkan penggunaan alkohol remaja dan mendidik kanak-kanak tentang kesan alkohol.

Saya menyusun kalkulator alkohol dalam HTML dan JavaScript untuk sekolah tempatan kami untuk menunjukkan kepada pelajar cara alkohol mempengaruhi badan dan cara kandungan alkohol dalam darah (BAC) dikira.

Bagaimanakah BAC Dikira?

Untuk menganggarkan BAC atau "promille", anda memerlukan beberapa maklumat penting:

  • Berat badan anda – memandangkan badan yang lebih besar boleh mencairkan alkohol lebih banyak daripada yang lebih kecil.
  • Jantina biologi – disebabkan oleh paras kandungan air badan yang berbeza, yang menjejaskan pengedaran alkohol dalam badan.
  • Bilangan unit alkohol yang digunakan – kerana setiap jenis minuman mempunyai kepekatan alkohol yang berbeza.

Mengira Unit Alkohol

Minuman yang berbeza menyumbangkan jumlah alkohol yang berbeza kepada aliran darah anda, bergantung pada isipadu dan kepekatan alkoholnya. Untuk menyeragamkan ini, unit pengiraan alkohol biasanya dilakukan seperti berikut:

volume (cl) * alcohol percentage * 0.8 / 120

Struktur

Seluruh "apl" distrukturkan sebagai dengan set medan tersusun dan kawalan dinamakan, menjadikannya mudah untuk mengekstrak elemen yang diperlukan dengan:

const { add, addbeverage, etc. } = app.elements;

Memandangkan Had BAC berbeza mengikut rantau, kita perlu memilih rantau dahulu, melaraskan penggelongsor berat dan memilih jantina biologi:

Can I Drive? Coding an Alcohol Tester


Seterusnya, kita boleh mula menambah minuman:

Can I Drive? Coding an Alcohol Tester

Ini ialah

mudah, di mana medan individu untuk unit, volum dan peratusan alkohol dilumpuhkan (dan disembunyikan melalui CSS), sehingga anda membuat pilihan daripada pemilih minuman:

Can I Drive? Coding an Alcohol Tester

Keterlihatan medan ini dikawal daripada fungsi enableElements:

[percentage, units, volume].forEach(el => el.disabled = !bool);

Apabila kami kemudian menambah minuman, senarai minuman yang telah digunakan akan dibuat dan BAC, anggaran jam untuk menenangkan diri, dsb., dikira:

Can I Drive? Coding an Alcohol Tester

Anda kemudian boleh terus menambah lebih banyak minuman, dan kemas kini BAC sewajarnya:

Can I Drive? Coding an Alcohol Tester

Memang sangat mengejutkan saya apabila mengetahui bahawa BAC undang-undang di A.S. adalah 4x lebih besar daripada Sweden atau Norway!

Dalam erti kata lain, di Sweden, anda boleh kehilangan lesen anda kerana meminum jumlah yang dibenarkan di sisi undang-undang di A.S.


Memecahkan Pengiraan BAC

Pengiraan teras untuk BAC dikendalikan dalam fungsi calculateAnswer:

volume (cl) * alcohol percentage * 0.8 / 120

Mari kita pecahkan:

  1. Kadar Metabolisme Alkohol: Kadar Metabolisme alkohol = 0.015

    • Nilai ini mewakili kadar purata di mana badan mengurangkan BAC sejam (kira-kira 0.015%).
  2. Mengira BAC Semasa: currentBAC = ((jumlah * 10) / ((weight.valueAsNumber * 1000) * parseFloat(bodywater.value))) * 100

    • jumlah * 10: Ini menukarkan jumlah unit alkohol yang digunakan kepada gram (memandangkan satu unit bersamaan dengan kira-kira 10 gram alkohol tulen).
    • weight.valueAsNumber * 1000: Menukar berat badan daripada kilogram kepada gram untuk tujuan pengiraan.
    • nilai.air badan: Faktor perpuluhan berdasarkan jantina biologi, mempengaruhi cara pengagihan alkohol dalam badan (mis., 0.58 untuk lelaki, 0.49 untuk wanita).
    • Hasilnya kemudian didarabkan dengan 100 untuk menukar BAC kepada peratusan.
  3. Menganggarkan Jam kepada Sedar: jamToSober = (Kadar Metabolisme BAC / alkohol semasa).kepadaTetap(1);

    • MembahagikanBAC semasa dengan kadar metabolisme untuk menganggarkan masa yang diperlukan untuk BAC mencapai sifar.
  4. Menentukan Status Pemanduan Sah: canDrive = currentBAC

    • Membandingkan currentBAC dengan had BAC undang-undang yang dipilih. Jika BAC semasa berada dalam had, pengguna dianggap "sesuai untuk memandu"; jika tidak, mereka tidak.

Fungsi hitungAnswer kemudian menggabungkan nilai ini ke dalam mesej yang menunjukkan BAC semasa, jam sehingga mabuk dan sama ada pengguna sesuai untuk memandu.


… Dan itu menyimpulkan tutorial ini. Jangan ragu untuk mencuba CodePen jika anda mahu — mungkin dengan mencipta UX yang lebih mesra kanak-kanak. Cuma ingat, alat ini menyediakan anggaran dan tidak mengambil kira faktor seperti masa anda mengambil setiap minuman. Dan perlu diingat, kemungkinan besar ia akan digunakan oleh orang yang sedar diri!


Demo


Sampul oleh DALL·E, daripada gesaan: Jana kereta mabuk dalam gaya kartun seperti Disney dan Cupheads awal, sebagai imej yang boleh saya pangkas kepada 1000x420px.

Atas ialah kandungan terperinci Bolehkah saya Memandu? Pengekodan Penguji Alkohol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Menggunakan Immer untuk Pengurusan Negeri ReactMenggunakan Immer untuk Pengurusan Negeri ReactApr 18, 2025 am 10:41 AM

Kami menggunakan keadaan untuk menjejaki data aplikasi. Negara berubah apabila pengguna berinteraksi dengan aplikasi. Apabila ini berlaku, kita perlu mengemas kini keadaan

Pembuatan favicon animasiPembuatan favicon animasiApr 18, 2025 am 10:35 AM

Ia adalah perkara pertama yang anda cari apabila anda menukar tab.

Menggunakan domain anda dengan laman web yang dihoskan NetlifyMenggunakan domain anda dengan laman web yang dihoskan NetlifyApr 18, 2025 am 10:34 AM

Netlify mempunyai dokumen mereka sendiri untuk domain tersuai, jadi jika anda '

Kod pseudoKod pseudoApr 18, 2025 am 10:33 AM

Yonatan Doron menulis jawatan pada Medium tidak lama dahulu yang disebut "Art of Code - mengapa anda harus menulis lebih banyak kod pseudo." Suka tajuk itu, sebagai peminat kod pseudo

Let ' s Memberi Tugas -tugas Grunt Rawatan Organisasi Marie KondoLet ' s Memberi Tugas -tugas Grunt Rawatan Organisasi Marie KondoApr 18, 2025 am 10:31 AM

Kami hidup dalam era skrip Webpack dan NPM. Baik atau buruk, mereka memimpin untuk bundling dan tugas berjalan, bersama -sama dengan bit rollup, JSPM dan Gulp. Tetapi

Bercabang dari pembahagian yang hebatBercabang dari pembahagian yang hebatApr 18, 2025 am 10:27 AM

Saya suka istilah pemaju front-end. Ia ' s merangkumi sifat tugas anda jika kebimbangan anda adalah:

Perjalanan pemula ' s untuk melancarkan laman webPerjalanan pemula ' s untuk melancarkan laman webApr 18, 2025 am 10:20 AM

Pada bulan September 2018, saya hanya beberapa bulan dalam perjalanan pembelajaran pembangunan web saya. Seperti yang saya pasti akan berlaku dengan banyak pemaju baru, itu adalah tugas besar

Semua petua dan cara baru ES2019Semua petua dan cara baru ES2019Apr 18, 2025 am 10:19 AM

Standard ECMAScript telah dikemas kini lagi dengan penambahan ciri -ciri baru dalam ES2019. Kini tersedia secara rasmi di Node, Chrome, Firefox, dan Safari

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).