狗狗 RER 和 MER 計(jì)算器 ?

本文將深入剖析狗狗靜止能量需求 (RER) 和維持能量需求 (MER) 計(jì)算器的程式碼，解釋程式碼的每個(gè)部分、其用途以及如何改進(jìn)它。如果您想測試程式碼，請點(diǎn)擊此處 ???。

---

這個(gè)基於 Web 的工具允許寵物主人根據(jù)狗狗的體重、生命階段和活動(dòng)量計(jì)算它們的卡路里需求。計(jì)算涉及兩個(gè)主要的公式：一個(gè)用於靜止能量需求 (RER)，另一個(gè)用於維持能量需求 (MER)。

---

HTML 結(jié)構(gòu) ??

基礎(chǔ)結(jié)構(gòu)：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="計(jì)算您狗狗的靜息能量需求 (RER) 和維持能量需求 (MER)...">
<meta name="keywords" content="狗狗 RER 計(jì)算器，狗狗 MER 計(jì)算器，狗狗營養(yǎng)，寵物卡路里計(jì)算器，靜息能量需求，維持能量需求">
<meta name="author" content="您的網(wǎng)站名稱">
<title>狗狗 RER 和 MER 計(jì)算器</title>

• 程式碼以標(biāo)準(zhǔn)的 HTML5 結(jié)構(gòu)開頭。 <meta> 標(biāo)籤對(duì)於 SEO 至關(guān)重要，並描述頁面的內(nèi)容。
• <title> 標(biāo)籤幫助搜尋引擎和瀏覽器理解頁面的主題。

---

表單元素：

<label for="weight">
    狗狗體重 (公斤): <input type="number" id="weight" required>
</label>

• 使用者在一個(gè)類型為數(shù)字的欄位中輸入體重，確保只接受數(shù)值。
• `required` 屬性確保在提交之前必須填寫輸入。

---

CSS 版面配置與響應(yīng)式樣式 ?

我們使用 CSS 來設(shè)定計(jì)算器的樣式，並確保它在所有螢?zāi)怀叽缟峡雌饋矶己馨?。以下是?yīng)用的 CSS 的細(xì)分：

body.rer-body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

• 主體具有淺色背景顏色、用於間距的填充和一致的字體，方便閱讀。

```css h1.rer-heading { text-align: center; color: #2a9d8f; margin-bottom: 20px; font-size: 28px; } ```

• 標(biāo)題的樣式設(shè)定為居中，採用青綠色，並具有適當(dāng)?shù)拈g距。

---

JavaScript 計(jì)算功能 ?

核心功能就在這裡。此腳本取得輸入，執(zhí)行計(jì)算，並動(dòng)態(tài)顯示結(jié)果。

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;

    // 根據(jù)生命階段和活動(dòng)水平調(diào)整 MER
    if (age === 'puppy') {
        mer *= 2; // 幼犬乘以2
    } else if (age === 'senior') {
        mer *= 1.2; // 老年犬乘以1.2
    }

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

    const resultDiv = document.getElementById('rer-result');
    resultDiv.innerHTML = `
        <p><strong>狗狗體重:</strong> ${weight} kg</p>
        <p><strong>生命階段:</strong> ${age}</p>
        <p><strong>活動(dòng)水平:</strong> ${activity}</p>
        <p><strong>靜息能量需求 (RER):</strong> ${rer.toFixed(2)} kcal/天</p>
        <p><strong>維持能量需求 (MER):</strong> ${mer} kcal/天</p>
    `;
    resultDiv.style.display = 'block';
}

代碼解釋：

• 我們先從 HTML 表單中提取輸入值（體重、生命階段和活動(dòng)量）。
• 我們檢查體重是否有效（`isNaN(weight)` 確保它是一個(gè)數(shù)字，並且 `weight > 0`）。
• 靜止能量需求 (RER) 使用公式：70 * weight^0.75 計(jì)算。
• 根據(jù)生命階段（幼犬、成犬或老年犬）和活動(dòng)量（低、中、高），我們使用乘數(shù)來調(diào)整維持能量需求 (MER)。
• 最後，我們在 `rer-result` div 中動(dòng)態(tài)顯示結(jié)果。

---

程式碼測試 ?

您可以點(diǎn)擊此處 ??? 線上測試程式碼。這是一個(gè)查看計(jì)算實(shí)際效果並檢查一切是否按預(yù)期工作的好方法。

---

如何改進(jìn)此程式碼 ?

您可以隨意改進(jìn)程式碼！以下是一些您可以增強(qiáng)其功能的領(lǐng)域：

• 改進(jìn)輸入驗(yàn)證：確保所有欄位都經(jīng)過徹底驗(yàn)證，並提供使用者友善的錯(cuò)誤訊息。
• 單位轉(zhuǎn)換：讓使用者在公制和英制單位之間切換體重和活動(dòng)量。
• 響應(yīng)式設(shè)計(jì)增強(qiáng)：確保設(shè)計(jì)能更好地適應(yīng)較小的螢?zāi)唬ɡ?，行?dòng)裝置）。
• 功能添加：添加其他字段，例如品種或以月為單位的年齡，以便進(jìn)行更精確的計(jì)算。

請?jiān)谙旅娴脑u(píng)論中告訴我您改進(jìn)的建議！ ?

---

透過遵循這些詳細(xì)步驟，您可以理解程式碼，調(diào)整它，甚至可以幫助改進(jìn)它。祝您編碼愉快！ ?

---

以上是狗 RER 和 MER 計(jì)算器的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！