suchen
HeimWeb-FrontendCSS-TutorialKann ich fahren? Codierung eines Alkoholtesters

In Dänemark, wo ich lebe, halten wir leider einen Rekord innerhalb Europas: Unsere Kinder sind die stärksten Alkoholtrinker auf dem Kontinent. Aus diesem Grund liegt ein starker Schwerpunkt auf der Reduzierung des Alkoholkonsums bei Jugendlichen und der Aufklärung von Kindern über die Auswirkungen von Alkohol.

Ich habe für unsere örtliche Schule einen Alkoholrechner in HTML und JavaScript zusammengestellt, um Schülern zu zeigen, wie sich Alkohol auf den Körper auswirkt und wie der Blutalkoholgehalt (BAC) berechnet wird.

Wie wird der BAC berechnet?

Um den BAC oder „Promille“ zu schätzen, benötigen Sie ein paar wichtige Informationen:

  • Ihr Körpergewicht – da ein größerer Körper Alkohol stärker verdünnen kann als ein kleinerer.
  • Biologisches Geschlecht – aufgrund unterschiedlicher Körperwassergehalte, die sich auf die Alkoholverteilung im Körper auswirken.
  • Die Anzahl der konsumierten Alkoholeinheiten – da jede Getränkeart eine andere Alkoholkonzentration hat.

Berechnen von Alkoholeinheiten

Verschiedene Getränke führen je nach Menge und Alkoholkonzentration unterschiedlich viel Alkohol in Ihren Blutkreislauf. Um dies zu standardisieren, erfolgt die Berechnung der Alkoholeinheit in der Regel wie folgt:

volume (cl) * alcohol percentage * 0.8 / 120

Struktur

Die gesamte „App“ ist als strukturiert. mit organisierten Feldsätzen und benannten Steuerelementen, die es einfach machen, die notwendigen Elemente zu extrahieren mit:

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

Da BAC-Grenzwerte je nach Region variieren, müssen wir zunächst eine Region auswählen, den Gewichtsregler anpassen und ein biologisches Geschlecht auswählen:

Can I Drive? Coding an Alcohol Tester


Als nächstes können wir mit dem Hinzufügen von Getränken beginnen:

Can I Drive? Coding an Alcohol Tester

Dies ist ein einfacher , bei dem die einzelnen Felder für Einheiten, Volumen und Alkoholprozentsatz deaktiviert (und über CSS ausgeblendet) sind, bis Sie eine Auswahl aus der Getränkeauswahl treffen:

Can I Drive? Coding an Alcohol Tester

Die Sichtbarkeit dieser Felder wird über eine enableElements-Funktion gesteuert:

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

Wenn wir dann das Getränk hinzufügen, wird eine Liste der konsumierten Getränke erstellt und der Alkoholgehalt, die geschätzten Stunden bis zur Ausnüchterung usw. berechnet:

Can I Drive? Coding an Alcohol Tester

Sie können dann weitere weitere Getränke hinzufügen und der BAC wird entsprechend aktualisiert:

Can I Drive? Coding an Alcohol Tester

Es war sehr für mich überraschend zu erfahren, dass der gesetzliche BAC in den USA viermal höher ist als der in Schweden oder Norwegen!

Mit anderen Worten: In Schweden könnten Sie Ihren Führerschein verlieren, wenn Sie eine Menge trinken, die in den USA gesetzlich zulässig wäre


Aufschlüsselung der BAC-Berechnung

Die Kernberechnung für BAC wird in der Funktion „calculeAnswer“ durchgeführt:

volume (cl) * alcohol percentage * 0.8 / 120

Lassen Sie es uns aufschlüsseln:

  1. Alkoholstoffwechselrate: Alkoholstoffwechselrate = 0,015

    • Dieser Wert stellt die durchschnittliche Rate dar, mit der der Körper die BAC pro Stunde reduziert (ca. 0,015 %).
  2. Berechnung des aktuellen BAC: currentBAC = ((total * 10) / ((weight.valueAsNumber * 1000) * parseFloat(bodywater.value))) * 100

    • Gesamt * 10: Dies rechnet die insgesamt konsumierten Alkoholeinheiten in Gramm um (da eine Einheit etwa 10 Gramm reinen Alkohols entspricht).
    • weight.valueAsNumber * 1000: Konvertiert das Körpergewicht zu Berechnungszwecken von Kilogramm in Gramm.
    • bodywater.value: Ein auf dem biologischen Geschlecht basierender Dezimalfaktor, der die Verteilung von Alkohol im Körper beeinflusst (z. B. 0,58 für Männer, 0,49 für Frauen).
    • Das Ergebnis wird dann mit 100 multipliziert, um den BAC in einen Prozentsatz umzuwandeln.
  3. Schätzung der Stunden bis zur Nüchternheit: hoursToSober = (currentBAC / AlcoholMetabolismRate).toFixed(1);

    • Dividiert den aktuellen BAC durch die Stoffwechselrate, um die Zeit abzuschätzen, die benötigt wird, bis der BAC Null erreicht.
  4. Bestimmung des legalen Fahrstatus: canDrive = currentBAC

    • Vergleicht den aktuellen BAC mit dem ausgewählten gesetzlichen BAC-Grenzwert. Liegt der aktuelle BAC innerhalb des Grenzwertes, gilt der Nutzer als „fahrtauglich“; andernfalls sind sie es nicht.

Die Funktion „calculeAnswer“ kombiniert diese Werte dann zu einer Nachricht, die den aktuellen Blutzuckerspiegel, die Stunden bis zur Nüchternheit und die Fahrtauglichkeit des Benutzers anzeigt.


… Und damit ist dieses Tutorial abgeschlossen. Wenn Sie möchten, können Sie gerne mit dem CodePen experimentieren – vielleicht indem Sie eine kinderfreundlichere Benutzeroberfläche schaffen. Denken Sie daran, dass dieses Tool eine Schätzung liefert und Faktoren wie die Zeit, zu der Sie jedes Getränk konsumiert haben, nicht berücksichtigt. Und denken Sie daran, dass es höchstwahrscheinlich von nüchternen Menschen verwendet wird!


Demo


Cover von DALL·E, aus der Eingabeaufforderung: Generieren Sie ein betrunkenes Auto im Cartoon-Stil, ähnlich den frühen Disney- und Cupheads-Filmen, als Bild, das ich auf 1000 x 420 Pixel zuschneiden kann.

Das obige ist der detaillierte Inhalt vonKann ich fahren? Codierung eines Alkoholtesters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Ankerpositionierung kümmert sich nur um die QuellenreihenfolgeAnkerpositionierung kümmert sich nur um die QuellenreihenfolgeApr 29, 2025 am 09:37 AM

Die Tatsache, dass die Ankerpositionierung die HTML-Quellenreihenfolge vermeidet, ist so CSS-y, weil sie eine weitere Trennung von Bedenken zwischen Inhalt und Präsentation ist.

Was bedeutet Margin: 40px 100px 120px 80px?Was bedeutet Margin: 40px 100px 120px 80px?Apr 28, 2025 pm 05:31 PM

In Artikel wird die CSS -Margin -Eigenschaft erörtert, insbesondere "Margin: 40px 100px 120px 80px", seine Anwendung und Auswirkungen auf das Webseitenlayout.

Was sind die verschiedenen CSS -Grenzeigenschaften?Was sind die verschiedenen CSS -Grenzeigenschaften?Apr 28, 2025 pm 05:30 PM

In dem Artikel werden die CSS -Grenzeigenschaften erörtert und sich auf Anpassung, Best Practices und Reaktionsfähigkeit konzentriert. Hauptargument: Border-Radius ist für reaktionsschnelle Designs am effektivsten.

Was sind CSS -Hintergründe, listen Sie die Eigenschaften auf?Was sind CSS -Hintergründe, listen Sie die Eigenschaften auf?Apr 28, 2025 pm 05:29 PM

In dem Artikel werden CSS -Hintergrundeigenschaften, deren Verwendungszwecke für die Verbesserung des Website -Designs und die zu vermeidenen Fehler erläutert. Der Hauptaugenmerk liegt auf reaktionsschnellem Design unter Verwendung der Hintergrundgröße.

Was sind CSS HSL -Farben?Was sind CSS HSL -Farben?Apr 28, 2025 pm 05:28 PM

In Artikel werden CSS HSL -Farben, ihre Verwendung im Webdesign und die Vorteile gegenüber RGB erörtert. Der Schwerpunkt liegt auf der Verbesserung des Designs und der Zugänglichkeit durch intuitive Farbmanipulation.

Wie können wir Kommentare in CSS hinzufügen?Wie können wir Kommentare in CSS hinzufügen?Apr 28, 2025 pm 05:27 PM

In dem Artikel wird die Verwendung von Kommentaren in CSS erörtert, in denen Einzellinien- und Multi-Line-Kommentarsyntaxe beschrieben werden. Es wird argumentiert, dass die Kommentare die Lesbarkeit, die Wartbarkeit und die Zusammenarbeit von Code verbessern, sich jedoch auf die Leistung der Website auswirken können, wenn sie nicht ordnungsgemäß verwaltet werden.

Was sind CSS -Selektoren?Was sind CSS -Selektoren?Apr 28, 2025 pm 05:26 PM

In dem Artikel werden CSS -Selektoren, ihre Typen und die Verwendung zum Styling von HTML -Elementen erörtert. Es vergleicht ID- und Klassenauswahlern und befasst sich mit Leistungsproblemen mit komplexen Selektoren.

Welche Art von CSS hat die höchste Priorität?Welche Art von CSS hat die höchste Priorität?Apr 28, 2025 pm 05:25 PM

In dem Artikel wird die CSS -Priorität erläutert und sich auf Inline -Stile mit der höchsten Spezifität konzentriert. Es erklärt Spezifitätsniveaus, übergeordnete Methoden und Debugging -Tools zur Verwaltung von CSS -Konflikten.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool