ホームページ >ウェブフロントエンド >CSSチュートリアル >運転できますか?アルコールテスターのコーディング

運転できますか?アルコールテスターのコーディング

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-10 21:01:03966ブラウズ

私が住んでいるデンマークでは、残念ながらヨーロッパ内での記録を保持しています。私たちの子供たちは大陸で最もアルコールを大量に飲む人です。このため、青少年の飲酒量を減らし、子供たちにアルコールの影響について教育することに重点が置かれています。

地元の学校向けにアルコール計算ツールを HTML と JavaScript で作成し、アルコールが体にどのような影響を与えるか、また血中アルコール含有量 (BAC) がどのように計算されるかを生徒に示しました。

BAC はどのように計算されますか?

BAC または「プロミル」を推定するには、いくつかの重要な情報が必要です。

  • あなたの体重 – 体が大きいほうが小さいよりもアルコールを薄めることができるためです。
  • 生物学的性別 – 体内の水分含量レベルの違いによるもので、体内のア​​ルコール分布に影響します。
  • 消費されたアルコール単位数 – 飲み物の種類ごとにアルコール濃度が異なるため。

アルコール単位の計算

飲み物が異なれば、その量とアルコール濃度に応じて、血流に与えるアルコールの量も異なります。これを標準化するために、アルコールの計算単位は通常次のように行われます:

volume (cl) * alcohol percentage * 0.8 / 120

構造

「アプリ」全体は

として構造化されています。整理されたフィールドセットと名前付きコントロールを使用すると、次の方法で必要な要素を簡単に抽出できます。

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

BAC 制限は地域によって異なるため、最初に地域を選択し、体重スライダーを調整して、生物学的性別を選択する必要があります。

Can I Drive? Coding an Alcohol Tester


次に、飲み物の追加を開始できます:

Can I Drive? Coding an Alcohol Tester

これは単純な

で、単位、容量、アルコール度数の個々のフィールドは、飲料セレクターから選択するまで無効になります (CSS によって非表示になります)。

Can I Drive? Coding an Alcohol Tester

これらのフィールドの可視性は、enableElements 関数から制御されます。

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

その後、飲み物を追加すると、消費した飲み物のリストが作成され、BAC、酔いが覚めるまでの推定時間などが計算されます。

Can I Drive? Coding an Alcohol Tester

その後、さらにの飲み物を追加し続けることができ、それに応じて BAC が更新されます。

Can I Drive? Coding an Alcohol Tester

米国の法的 BAC がスウェーデンやノルウェーの BAC の 4 倍であることを知ったのは、非常に驚きでした。

言い換えれば、スウェーデンでは、米国で法的に許可される量を飲酒すると免許を剥奪される可能性があります。


BAC 計算の内訳

BAC のコア計算は、calculateAnswer 関数で処理されます。

volume (cl) * alcohol percentage * 0.8 / 120

詳しく見てみましょう:

  1. アルコール代謝率: アルコール代謝率 = 0.015

    • この値は、身体が 1 時間あたりに BAC を減少させる平均速度 (約 0.015%) を表します。
  2. 現在の BAC の計算: currentBAC = ((total * 10) / ((weight.valueAsNumber * 1000) * parseFloat(bodywater.value))) * 100

    • total * 10: これは、消費されたアルコールの総単位をグラムに変換します (1 単位は約 10 グラムの純アルコールに等しいため)。
    • weight.valueAsNumber * 1000: 計算のために体重をキログラムからグラムに変換します。
    • bodywater.value: アルコールが体内にどのように分布するかに影響する、生物学的性別に基づく小数係数 (例: 男性の場合は 0.58、女性の場合は 0.49)。
    • 結果に 100 を掛けて、BAC をパーセンテージに変換します。
  3. 断酒までの時間の推定: hoursToSober = (currentBAC / AlcoholMetabolismRate).toFixed(1);

    • 現在の BAC を代謝率で割って、BAC がゼロに達するまでに必要な時間を推定します。
  4. 法的な運転ステータスの決定: canDrive = currentBAC

    • 現在の BAC を選択した法定 BAC 制限と比較します。現在の BAC が制限内にある場合、ユーザーは「運転に適している」とみなされます。それ以外の場合は、そうではありません。

calculateAnswer 関数は、これらの値を組み合わせて、現在の BAC、飲酒までの時間、ユーザーが運転に適しているかどうかを示すメッセージを生成します。


…これでこのチュートリアルは終了です。必要に応じて、より子供向けの UX を作成して、CodePen を自由に試してみてください。このツールは推定値を提供するものであり、各飲み物を飲んだ時間などの要因は考慮していないことに注意してください。そして、これはおそらく地味な人によって使用される可能性が高いことに注意してください!


デモ


DALL·E によるカバー、プロンプトから: 初期のディズニーやカップヘッズに似た漫画風のスタイルで酔った車を生成します。画像として 1000x420 ピクセルまでトリミングできます。

以上が運転できますか?アルコールテスターのコーディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。