如何在HTML中基于用户输入创建带连续计算公式的现金流表格

修复后完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现金流计算器</title>
    <style>
        body {
            background-color: white;
            overflow-x: auto;
            margin: 0;
            width: 100vw;
            padding: 10px;
            box-sizing: border-box;
        }
        table {
            border-collapse: collapse;
            border-spacing: 2;
            width: 100%;
            border: 1px solid #ddd;
            margin-bottom: 20px;
        }
        td, th {
            text-align: left;
            padding: 10px;
            border: 1px solid #ddd;
            min-width: 80px;
        }
        tr:nth-child(even) {
            background-color: #f8d7da;
        }
        input {
            text-align: center;
            font-size: 16px;
            padding: 4px;
            width: 120px;
        }
        .param-table td {
            background-color: #756c6c;
            color: white;
        }
        button {
            padding: 8px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>净利润现值计算器</h1>
    <table>
        <caption>简化企业自由现金流模型（单位：百万元）</caption>
        <thead>
            <tr>
                <th>年份</th>
                <th>2018</th>
                <th>2019</th>
                <th>2020</th>
                <th>2021</th>
                <th>2022</th>
                <th>2023</th>
                <th>2024</th>
                <th>2025</th>
                <th>2026</th>
                <th>2027</th>
                <th>2028</th>
                <th>2029</th>
                <th>2030</th>
                <th>2031</th>
                <th>2032</th>
                <th>2033</th>
                <th>2034</th>
                <th>2035</th>
                <th>2036</th>
                <th>2037</th>
                <th>2038</th>
                <th>2039</th>
                <th>2040</th>
                <th>2041</th>
                <th>2042</th>
                <th>2043</th>
                <th>2044</th>
                <th>2045</th>
                <th>2046</th>
                <th>2047</th>
                <th>2048</th>
                <th>2049</th>
                <th>2050</th>
            </tr>
        </thead>
        <tbody>
            <tr id="revenueRow">
                <td>营收</td>
                <td>x</td>
                <td>x</td>
                <td>x</td>
                <td>x</td>
                <td><input type="number" id="revenue2022" value="202"></td>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr id="incomeRow">
                <td>净收入</td>
                <td>x</td>
                <td>x</td>
                <td>x</td>
                <td>x</td>
                <td id="income2022"></td>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>

    <table class="param-table">
        <tr>
            <td>固定增长率（%）</td>
            <td><input type="number" id="maturity" value="10" /></td>
        </tr>
        <tr>
            <td>折现率（%）</td>
            <td><input type="number" id="interest" value="6" /></td>
        </tr>
        <tr>
            <td>净收入占营收比例（%）</td>
            <td><input type="number" id="incomeRate" value="20" /></td>
        </tr>
    </table>
    <br>
    <button onclick="calculateBy()">计算</button>

    <script>
        // 页面加载时先计算2022年净收入
        window.onload = function() {
            calc2022Income();
        }

        // 计算2022年净收入
        function calc2022Income() {
            const revenue22 = Number(document.getElementById('revenue2022').value);
            const incomeRate = Number(document.getElementById('incomeRate').value) / 100;
            document.getElementById('income2022').innerText = (revenue22 * incomeRate).toFixed(2);
        }

        function calculateBy() {
            // 先更新2022年净收入
            calc2022Income();

            const growthRate = Number(document.getElementById('maturity').value) / 100;
            const incomeRate = Number(document.getElementById('incomeRate').value) / 100;
            const revenueRow = document.getElementById('revenueRow').getElementsByTagName('td');
            const incomeRow = document.getElementById('incomeRow').getElementsByTagName('td');

            // 2022年索引是5，从2023年（索引6）开始计算到2050年（索引33）
            let lastRevenue = Number(document.getElementById('revenue2022').value);
            let lastIncome = Number(document.getElementById('income2022').innerText);

            for(let i = 6; i <= 33; i++) {
                const currentRevenue = lastRevenue * (1 + growthRate);
                const currentIncome = currentRevenue * incomeRate;
                revenueRow[i].innerText = currentRevenue.toFixed(2);
                incomeRow[i].innerText = currentIncome.toFixed(2);
                lastRevenue = currentRevenue;
                lastIncome = currentIncome;
            }
        }
    </script>
</body>
</html>

功能说明 #

• 支持自定义调整2022年初始营收、增长率、净收入占营收比例，点击计算即可自动生成2023到2050年的所有营收、净收入数据
• 修复了原代码中HTML语法错误、样式失效问题，添加了横向滚动适配宽表格
• 所有数值默认保留2位小数展示，可修改代码中toFixed(2)的参数调整精度
• 后续如果需要补充净现值计算逻辑，直接在calculateBy函数末尾添加对应代码即可

内容的提问来源于stack exchange，提问作者noah