犬の RER および MER 計算機 ?

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

---

このウェブベースのツールを使用すると、ペットの飼い主は、體重、ライフステージ、活動レベルに基づいて犬の必要カロリーを計算できます。計算には 2 つの主要な式が含まれます。1 つは安靜時エネルギー要件 (RER) 用、もう 1 つは維持エネルギー要件 (MER) 用です。

---

HTML 構(gòu)造 ??

インフラストラクチャ:

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

• コードは標(biāo)準(zhǔn)の HTML5 構(gòu)造で始まります。 <meta> タグは SEO にとって重要であり、ページのコンテンツを説明します。
• <title> タグは、検索エンジンとブラウザがページのトピックを理解するのに役立ちます。

---

フォーム要素:

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

• ユーザーは數(shù)値タイプのフィールドに體重を入力し、數(shù)値のみが受け入れられることを確認(rèn)します。
• 「required」屬性により、送信前に入力が必ず完了する必要があります。

---

CSS レイアウトとレスポンシブ スタイル?

私たちは CSS を使用して電卓のスタイルを設(shè)定し、すべての畫面サイズで見栄えが良くなるようにしています。適用される CSS の內(nèi)訳は次のとおりです:

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

• 本文には明るい背景色があり、間隔を空けるためのパディングがあり、読みやすいように一貫したフォントが使用されています。

```css h1.rer-見出し { テキスト整列: 中央; 色: #2a9d8f; マージン-ボトム: 20px; フォントサイズ: 28px; } 「」

• タイトルは、ターコイズ色で中央に配置され、適切な間隔で配置されるようにスタイル設(shè)定されています。

---

JavaScriptの計算関數(shù)?

コア機能はここにあります。このスクリプトは入力を受け取り、計算を?qū)g行し、結(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ù)生命階段和活動水平調(diào)整 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` であることを確認(rèn)します)。
• 安靜時エネルギー必要量 (RER) 次の式を使用して計算されます: 70 * 體重 ^ 0.75。
• 私たちは乗數(shù)を使用して、ライフステージ (子犬、成犬、または高齢犬) と活動レベル (低、中、高) に基づいて維持エネルギー要件 (MER) を調(diào)整します。
• 最後に、`rer-result` div に結(jié)果を動的に表示します。

---

コードのテスト?

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

---

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

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

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

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

---

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

---

以上が犬のRERとMERの計算機の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。