怎么用js做一个身高预测程序

用JavaScript做一个身高预测程序的步骤

一、身高预测的基本原理

基因、环境、营养、锻炼、睡眠是影响身高的主要因素。基因在很大程度上决定了一个人的身高，因为父母的身高会直接影响孩子的身高。环境和营养也起着重要作用，特别是在儿童和青少年时期。适当的锻炼和足够的睡眠也有助于促进身高的增长。

为了详细描述，我们将重点探讨基因因素。基于父母身高预测孩子身高的常用公式为：

对于男孩：（父亲身高 + 母亲身高 + 13）/ 2
对于女孩：（父亲身高 + 母亲身高 – 13）/ 2

二、使用JavaScript进行身高预测

1、创建基础的HTML结构

首先，我们需要创建一个简单的HTML页面，用于输入父母的身高和显示预测结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>身高预测程序</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .result {
            margin-top: 20px;
            font-size: 1.2em;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>身高预测程序</h1>
        <div class="form-group">
            <label for="fatherHeight">父亲身高（cm）:</label>
            <input type="number" id="fatherHeight" placeholder="请输入父亲的身高">
        </div>
        <div class="form-group">
            <label for="motherHeight">母亲身高（cm）:</label>
            <input type="number" id="motherHeight" placeholder="请输入母亲的身高">
        </div>
        <div class="form-group">
            <label for="gender">性别:</label>
            <select id="gender">
                <option value="male">男孩</option>
                <option value="female">女孩</option>
            </select>
        </div>
        <button onclick="predictHeight()">预测身高</button>
        <div class="result" id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2、编写JavaScript逻辑

接下来，我们需要编写JavaScript代码来实现身高预测的逻辑。我们将在一个独立的JavaScript文件（script.js）中编写代码。

function predictHeight() {
    const fatherHeight = parseFloat(document.getElementById('fatherHeight').value);
    const motherHeight = parseFloat(document.getElementById('motherHeight').value);
    const gender = document.getElementById('gender').value;
    let predictedHeight;
    if (isNaN(fatherHeight) || isNaN(motherHeight)) {
        alert('请输入有效的身高值。');
        return;
    }
    if (gender === 'male') {
        predictedHeight = (fatherHeight + motherHeight + 13) / 2;
    } else {
        predictedHeight = (fatherHeight + motherHeight - 13) / 2;
    }
    document.getElementById('result').innerText = `预测身高: ${predictedHeight.toFixed(2)} cm`;
}

3、进一步优化和扩展功能

3.1、校验输入

为了确保用户输入的身高值是有效的，我们可以在JavaScript代码中添加更多的校验逻辑。例如，确保输入的值在合理的范围内（例如，100cm到250cm之间）。

function predictHeight() {
    const fatherHeight = parseFloat(document.getElementById('fatherHeight').value);
    const motherHeight = parseFloat(document.getElementById('motherHeight').value);
    const gender = document.getElementById('gender').value;
    let predictedHeight;
    if (isNaN(fatherHeight) || isNaN(motherHeight)) {
        alert('请输入有效的身高值。');
        return;
    }
    if (fatherHeight < 100 || fatherHeight > 250 || motherHeight < 100 || motherHeight > 250) {
        alert('请输入合理范围内的身高值（100cm到250cm之间）。');
        return;
    }
    if (gender === 'male') {
        predictedHeight = (fatherHeight + motherHeight + 13) / 2;
    } else {
        predictedHeight = (fatherHeight + motherHeight - 13) / 2;
    }
    document.getElementById('result').innerText = `预测身高: ${predictedHeight.toFixed(2)} cm`;
}

3.2、增加其他因素

除了父母的身高，我们还可以考虑添加其他影响身高的因素，例如营养、锻炼和睡眠质量。用户可以选择这些因素的等级，并在预测公式中加入权重。

<div class="form-group">
    <label for="nutrition">营养:</label>
    <select id="nutrition">
        <option value="1.0">差</option>
        <option value="1.1">一般</option>
        <option value="1.2">良好</option>
        <option value="1.3">非常好</option>
    </select>
</div>
<div class="form-group">
    <label for="exercise">锻炼:</label>
    <select id="exercise">
        <option value="1.0">很少</option>
        <option value="1.1">偶尔</option>
        <option value="1.2">经常</option>
        <option value="1.3">非常频繁</option>
    </select>
</div>
<div class="form-group">
    <label for="sleep">睡眠:</label>
    <select id="sleep">
        <option value="1.0">差</option>
        <option value="1.1">一般</option>
        <option value="1.2">良好</option>
        <option value="1.3">非常好</option>
    </select>
</div>

function predictHeight() {
    const fatherHeight = parseFloat(document.getElementById('fatherHeight').value);
    const motherHeight = parseFloat(document.getElementById('motherHeight').value);
    const gender = document.getElementById('gender').value;
    const nutrition = parseFloat(document.getElementById('nutrition').value);
    const exercise = parseFloat(document.getElementById('exercise').value);
    const sleep = parseFloat(document.getElementById('sleep').value);
    let predictedHeight;
    if (isNaN(fatherHeight) || isNaN(motherHeight)) {
        alert('请输入有效的身高值。');
        return;
    }
    if (fatherHeight < 100 || fatherHeight > 250 || motherHeight < 100 || motherHeight > 250) {
        alert('请输入合理范围内的身高值（100cm到250cm之间）。');
        return;
    }
    if (gender === 'male') {
        predictedHeight = (fatherHeight + motherHeight + 13) / 2;
    } else {
        predictedHeight = (fatherHeight + motherHeight - 13) / 2;
    }
    // 考虑营养、锻炼和睡眠因素
    predictedHeight *= (nutrition + exercise + sleep) / 3;
    document.getElementById('result').innerText = `预测身高: ${predictedHeight.toFixed(2)} cm`;
}

三、总结

通过以上步骤，我们创建了一个简单但功能强大的身高预测程序，使用JavaScript来计算预测值。我们首先创建了基础的HTML结构，然后编写了JavaScript逻辑来实现身高预测，并进一步优化和扩展了程序的功能。这个程序可以帮助用户根据父母的身高及其他因素预测孩子的身高，具有一定的实用性和趣味性。