犬のRERとMERの計算機-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

犬のRERとMERの計算機

Susan Sarandon

Jan 13, 2025 pm 04:04 PM

Dog RER & MER Calculator

犬の RER および MER 計算機 ?

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

このウェブベースのツールを使用すると、ペットの飼い主は、体重、ライフステージ、活動レベルに基づいて犬の必要カロリーを計算できます。計算には 2 つの主要な式が含まれます。1 つは安静時エネルギー要件 (RER) 用、もう 1 つは維持エネルギー要件 (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 计算器，狗狗营养，宠物卡路里计算器，静息能量需求，维持能量需求">
<meta name="author" content="您的网站名称">
<title>狗狗 RER 和 MER 计算器</title>

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

フォーム要素:

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

ユーザーは数値タイプのフィールドに体重を入力し、数値のみが受け入れられることを確認します。
「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-見出し { テキスト整列: 中央; 色: #2a9d8f; マージン-ボトム: 20px; フォントサイズ: 28px; } 「」

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

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