Calculateur RER & MER pour Chien

Calculateur RER et MER pour chiens ?

Cet article examinera en profondeur le code du calculateur des besoins énergétiques au repos (RER) et des besoins énergétiques de maintenance (MER) du chien, expliquant chaque partie du code, son objectif et comment l'améliorer. Si vous souhaitez tester le code, cliquez ici ?‍?.

---

Cet outil en ligne permet aux propriétaires d'animaux de calculer les besoins caloriques de leur chien en fonction de son poids, de son stade de vie et de son niveau d'activité. Le calcul implique deux formules principales : une pour les besoins énergétiques au repos (RER) et une autre pour les besoins énergétiques de maintenance (MER).

---

Structure HTML ?️

Infrastructures :

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

• Le code commence par une structure HTML5 standard. La balise <meta> est cruciale pour le référencement et décrit le contenu de la page.
La balise
• <title></title> aide les moteurs de recherche et les navigateurs à comprendre le sujet de la page.

---

Éléments de formulaire :

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

• L'utilisateur saisit son poids dans un champ de type Nombre, en s'assurant que seules les valeurs numériques sont acceptées.
• L'attribut `required` garantit que la saisie doit être renseignée avant la soumission.

---

Mise en page CSS et styles réactifs ?

Nous utilisons CSS pour styliser la calculatrice et nous assurer qu'elle s'affiche parfaitement sur toutes les tailles d'écran. Voici une répartition du CSS appliqué :

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

• Le corps a une couleur de fond claire, un remplissage pour l'espacement et une police cohérente pour une lecture facile.

```css h1.rer-titre { alignement du texte : centre ; couleur : #2a9d8f ; marge inférieure : 20 px ; taille de police : 28 px ; } ```

• Le titre est centré, en turquoise et avec un espacement approprié.

---

Fonction de calcul JavaScript ?

La fonctionnalité de base est ici. Ce script prend des entrées, effectue des calculs et affiche dynamiquement les résultats.

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

Explication du code :

• Nous commençons par extraire les valeurs d'entrée (poids, stade de vie et niveau d'activité) du formulaire HTML.
• Nous vérifions si le poids est valide (`isNaN(weight)` s'assure qu'il s'agit d'un nombre et `weight > 0`).
• Besoin énergétique au repos (RER) Calculé à l'aide de la formule : 70 * poids ^ 0,75.
• Nous utilisons des multiplicateurs pour ajuster les besoins énergétiques d'entretien (MER) en fonction du stade de la vie (chiot, adulte ou chien senior) et du niveau d'activité (faible, moyen, élevé).
• Enfin, nous affichons dynamiquement les résultats dans le div `rer-result`.

---

Test de code ?

Vous pouvez cliquer ici pour tester le code en ligne. C'est un excellent moyen de voir vos calculs en action et de vérifier que tout fonctionne comme prévu.

---

Comment améliorer ce code ?

N'hésitez pas à améliorer le code ! Voici quelques domaines dans lesquels vous pouvez améliorer ses fonctionnalités :

• Validation des entrées améliorée  : assurez-vous que tous les champs sont soigneusement validés et fournissez des messages d'erreur conviviaux.
• Conversion d'unités : permet aux utilisateurs de basculer les niveaux de poids et d'activité entre les unités métriques et impériales.
• Améliorations de la conception réactive : assurez-vous que la conception s'adapte mieux aux écrans plus petits (par exemple, les appareils mobiles).
• Fonctionnalité ajoutée : Ajoutez des champs supplémentaires tels que la race ou l'âge en mois pour des calculs plus précis.

Faites-moi part de vos suggestions d'amélioration dans les commentaires ci-dessous ! ?

---

En suivant ces étapes détaillées, vous pouvez comprendre le code, le peaufiner et même contribuer à l'améliorer. Bon codage ! ?

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!