개 RER 및 MER 계산기

개 RER 및 MER 계산기 ?

이 기사에서는 RER(개 휴식 에너지 ​​요구 사항) 및 MER(유지 에너지 요구 사항) 계산기의 코드를 심층적으로 살펴보고 코드의 각 부분과 목적, 개선 방법을 설명합니다. 코드를 테스트하려면 여기 ?‍?를 클릭하세요.

---

이 웹 기반 도구를 사용하면 애완동물 소유자는 체중, 생애 단계, 활동 수준을 기준으로 강아지의 칼로리 필요량을 계산할 수 있습니다. 계산에는 휴식 에너지 ​​요구량(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-제목 { 텍스트 정렬: 중앙; 색상: #2a9d8f; 여백 하단: 20px; 글꼴 크기: 28px; } ````

• 제목은 청록색으로 중앙에 배치되고 적절한 간격을 두고 스타일이 지정됩니다.

---

자바스크립트 계산 기능?

핵심 기능은 여기에 있습니다. 이 스크립트는 입력을 받아 계산을 수행하고 결과를 동적으로 표시합니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!