狗 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中文网其他相关文章！