犬のRERとMERの計算機

犬の RER および MER 計算機 ?

この記事では、犬の安静時エネルギー要件 (RER) および維持エネルギー要件 (MER) 計算ツールのコードを詳しく調べ、コードの各部分、その目的、および改善方法について説明します。コードをテストしたい場合は、ここをクリックしてください?‍?。

---

このウェブベースのツールを使用すると、ペットの飼い主は、体重、ライフステージ、活動レベルに基づいて犬の必要カロリーを計算できます。計算には 2 つの主要な式が含まれます。1 つは安静時エネルギー要件 (RER) 用、もう 1 つは維持エネルギー要件 (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-見出し { テキスト整列: 中央; 色: #2a9d8f; マージン-ボトム: 20px; フォントサイズ: 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 * 体重 ^ 0.75。
• 私たちは乗数を使用して、ライフステージ (子犬、成犬、または高齢犬) と活動レベル (低、中、高) に基づいて維持エネルギー要件 (MER) を調整します。
• 最後に、`rer-result` div に結果を動的に表示します。

---

コードのテスト?

ここをクリックすると、コードをオンラインでテストできます。これは、計算の動作を確認し、すべてが期待どおりに機能していることを確認する優れた方法です。

---

このコードを改善するにはどうすればよいですか?

コードを自由に改善してください。機能を強化できる領域をいくつか示します:

• 入力検証の改善 : すべてのフィールドが完全に検証されていることを確認し、ユーザー フレンドリーなエラー メッセージを提供します。
• 単位変換: ユーザーは体重と活動レベルをメートル単位とヤード・ポンド法単位の間で切り替えることができます。
• レスポンシブ デザインの強化: デザインが小さな画面 (モバイル デバイスなど) によりよく適応するようにします。
• 機能の追加: より正確に計算できるように、品種や月齢などの追加フィールドを追加します。

以下のコメント欄で改善案をお知らせください。 ?

---

これらの詳細な手順に従うことで、コードを理解し、調整し、さらには改善に役立てることができます。コーディングを楽しんでください! ?

---

以上が犬のRERとMERの計算機の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。