RER- und MER-Rechner für Hunde

RER- und MER-Rechner für Hunde ?

In diesem Artikel werfen wir einen detaillierten Blick auf den Code für den Rechner für den Ruheenergiebedarf (RER) und den Wartungsenergiebedarf (MER) von Hunden und erklären jeden Teil des Codes, seinen Zweck und wie man ihn verbessern kann. Wenn Sie den Code testen möchten, klicken Sie hier ?‍?.

---

Mit diesem webbasierten Tool können Tierhalter den Kalorienbedarf ihres Hundes basierend auf Gewicht, Lebensphase und Aktivitätsgrad berechnen. Die Berechnung umfasst zwei Hauptformeln: eine für den Ruheenergiebedarf (RER) und eine für den Erhaltungsenergiebedarf (MER).

---

HTML-Struktur ?️

Infrastruktur:

<code class="language-html"><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="计算您狗狗的静息能量需求 (RER) 和维持能量需求 (MER)...">
<meta name="keywords" content="狗狗 RER 计算器，狗狗 MER 计算器，狗狗营养，宠物卡路里计算器，静息能量需求，维持能量需求">
<meta name="author" content="您的网站名称">
<title>狗狗 RER 和 MER 计算器</title></code>

• Der Code beginnt mit einer Standard-HTML5-Struktur. Der <meta>-Tag ist entscheidend für SEO und beschreibt den Inhalt der Seite.
Das Tag
• <title> hilft Suchmaschinen und Browsern, das Thema der Seite zu verstehen.

---

Formularelemente:

<code class="language-html"><label for="weight">
    狗狗体重 (公斤): <input type="number" id="weight" required>
</label></code>

• Der Benutzer gibt sein Gewicht in ein Feld vom Typ Zahl ein und stellt sicher, dass nur numerische Werte akzeptiert werden.
• Das Attribut „erforderlich“ stellt sicher, dass die Eingabe vor dem Absenden ausgefüllt werden muss.

---

CSS-Layout und responsive Stile?

Wir verwenden CSS, um den Rechner zu gestalten und sicherzustellen, dass er auf allen Bildschirmgrößen gut aussieht. Hier ist eine Aufschlüsselung des angewendeten CSS:

<code class="language-css">body.rer-body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}</code>

• Der Textkörper hat eine helle Hintergrundfarbe, Polsterung für Abstände und eine einheitliche Schriftart für einfaches Lesen.

„css h1.rer-heading { Textausrichtung: Mitte; Farbe: #2a9d8f; Rand unten: 20px; Schriftgröße: 28px; } „

• Der Titel ist zentriert, in Türkis und mit angemessenem Abstand gestaltet.

---

JavaScript-Berechnungsfunktion?

Die Kernfunktionalität ist hier. Dieses Skript nimmt Eingaben entgegen, führt Berechnungen durch und zeigt die Ergebnisse dynamisch an.

<code class="language-javascript">function calculateRER() {
    const weight = parseFloat(document.getElementById('weight').value);
    const age = document.getElementById('age').value;
    const activity = document.getElementById('activity').value;

    if (isNaN(weight) || weight <= 0) {
        alert('请输入有效的体重!');
        return;
    }

    let rer = 70 * Math.pow(weight, 0.75);
    let mer = rer;

    // 根据生命阶段和活动水平调整 MER
    if (age === 'puppy') {
        mer *= 2; // 幼犬乘以2
    } else if (age === 'senior') {
        mer *= 1.2; // 老年犬乘以1.2
    }

    if (activity === 'high') {
        mer *= 1.6; // 高活动量乘以1.6
    } else if (activity === 'moderate') {
        mer *= 1.4; // 中等活动量乘以1.4
    }

    const resultDiv = document.getElementById('rer-result');
    resultDiv.innerHTML = `
        <p><strong>狗狗体重:</strong> ${weight} kg</p>
        <p><strong>生命阶段:</strong> ${age}</p>
        <p><strong>活动水平:</strong> ${activity}</p>
        <p><strong>静息能量需求 (RER):</strong> ${rer.toFixed(2)} kcal/天</p>
        <p><strong>维持能量需求 (MER):</strong> ${mer} kcal/天</p>
    `;
    resultDiv.style.display = 'block';
}</code>

Code-Erklärung:

• Wir beginnen mit dem Extrahieren der Eingabewerte (Gewicht, Lebensphase und Aktivitätsniveau) aus dem HTML-Formular.
• Wir prüfen, ob das Gewicht gültig ist („isNaN(weight)“ stellt sicher, dass es eine Zahl ist und „weight > 0“).
• Ruheenergiebedarf (RER) Berechnet nach der Formel: 70 * Gewicht^0,75.
• Wir verwenden Multiplikatoren, um den Erhaltungsenergiebedarf (MER) basierend auf dem Lebensstadium (Welpe, erwachsener oder älterer Hund) und dem Aktivitätsniveau (niedrig, mittel, hoch) anzupassen.
• Schließlich zeigen wir die Ergebnisse dynamisch im Div „rer-result“ an.

---

Codetests?

Sie können hier klicken, um den Code online zu testen. Dies ist eine großartige Möglichkeit, Ihre Berechnungen in Aktion zu sehen und zu überprüfen, ob alles wie erwartet funktioniert.

---

Wie kann dieser Code verbessert werden?

Fühlen Sie sich frei, den Code zu verbessern! Hier sind einige Bereiche, in denen Sie die Funktionalität verbessern können:

• Verbesserte Eingabevalidierung : Stellen Sie sicher, dass alle Felder gründlich validiert werden und benutzerfreundliche Fehlermeldungen bereitstellen.
• Einheitenumrechnung: Ermöglicht Benutzern das Umschalten von Gewichts- und Aktivitätsniveaus zwischen metrischen und imperialen Einheiten.
• Responsive Design-Verbesserungen: Stellen Sie sicher, dass sich das Design besser an kleinere Bildschirme (z. B. mobile Geräte) anpasst.
• Funktion hinzugefügt: Fügen Sie für genauere Berechnungen zusätzliche Felder wie Rasse oder Alter in Monaten hinzu.

Teilen Sie mir Ihre Verbesserungsvorschläge in den Kommentaren unten mit! ?

---

Wenn Sie diese detaillierten Schritte befolgen, können Sie den Code verstehen, optimieren und sogar zur Verbesserung beitragen. Viel Spaß beim Codieren! ?

---

Das obige ist der detaillierte Inhalt vonRER- und MER-Rechner für Hunde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!