狗 RER 和 MER 計算器

狗狗 RER 和 MER 計算器 ?

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

---

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

---

HTML 結構 ?️

基礎結構：

<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>

• 程式碼以標準的 HTML5 結構開頭。 <meta> 標籤對於 SEO 至關重要，並描述頁面的內容。
• <title> 標籤幫助搜尋引擎和瀏覽器理解頁面的主題。

---

表單元素：

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

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

---

CSS 版面配置與響應式樣式 ?

我們使用 CSS 來設定計算器的樣式，並確保它在所有螢幕尺寸上看起來都很棒。以下是應用的 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>

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

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

• 標題的樣式設定為居中，採用青綠色，並具有適當的間距。

---

JavaScript 計算功能 ?

核心功能就在這裡。此腳本取得輸入，執行計算，並動態顯示結果。

<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>

代碼解釋：

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

---

程式碼測試 ?

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

---

如何改進此程式碼 ?

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

• 改進輸入驗證：確保所有欄位都經過徹底驗證，並提供使用者友善的錯誤訊息。
• 單位轉換：讓使用者在公制和英制單位之間切換體重和活動量。
• 響應式設計增強：確保設計能更好地適應較小的螢幕（例如，行動裝置）。
• 功能添加：添加其他字段，例如品種或以月為單位的年齡，以便進行更精確的計算。

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

---

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

---

以上是狗 RER 和 MER 計算器的詳細內容。更多資訊請關注PHP中文網其他相關文章！