狗狗 RER 和 MER 計算器 ?

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

---

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

---

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 計算器，狗狗營養(yǎng)，寵物卡路里計算器，靜息能量需求，維持能量需求">
<meta name="author" content="您的網(wǎng)站名稱">
<title>狗狗 RER 和 MER 計算器</title>

• 代碼以標準的 HTML5 結構開頭。<meta> 標簽對于 SEO 至關重要，并描述頁面的內容。
• <title> 標簽幫助搜索引擎和瀏覽器理解頁面的主題。

---

表單元素：

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

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

---

CSS 布局和響應式樣式 ?

我們使用 CSS 來設置計算器的樣式，并確保它在所有屏幕尺寸上看起來都很棒。以下是應用的 CSS 的細分：

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; } ```

• 標題的樣式設置為居中，采用青綠色，并具有適當?shù)拈g距。

---

JavaScript 計算功能 ?

核心功能就在這里。此腳本獲取輸入，執(zhí)行計算，并動態(tài)顯示結果。

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ù)生命階段和活動水平調整 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';
}

代碼解釋：

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

---

代碼測試 ?

您可以點擊此處 ??? 在線測試代碼。這是一個查看計算實際效果并檢查一切是否按預期工作的好方法。

---

如何改進此代碼 ?

您可以隨意改進代碼！以下是一些您可以增強其功能的領域：

• 改進輸入驗證：確保所有字段都經(jīng)過徹底驗證，并提供用戶友好的錯誤消息。
• 單位轉換：允許用戶在公制和英制單位之間切換體重和活動水平。
• 響應式設計增強：確保設計更好地適應較小的屏幕（例如，移動設備）。
• 功能添加：添加其他字段，例如品種或以月為單位的年齡，以便進行更精確的計算。

請在下面的評論中告訴我您改進的建議！?

---

通過遵循這些詳細步驟，您可以理解代碼，調整它，甚至可以幫助改進它。祝您編碼愉快！?

---

以上是狗 RER 和 MER 計算器的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！