就是这个样的粗爆，手搓一个计算器：复利计算器

作为程序员，没有合适的工具，就得手搓一个，PC端，移动端均可适用。废话不多说，直接上代码。

HTML:

<div class="calculator">
        <h1>复利计算器</h1>
        <div class="instructions">
            <p>请输入以下信息以计算未来投资的价值：</p>
            <ul>
                <li><strong>本金：</strong>输入初始投资金额。</li>
                <li><strong>年利率：</strong>输入年利率 (百分比)。</li>
                <li><strong>每年复利次数：</strong>选择每年复利的次数。</li>
                <li><strong>投资年数：</strong>输入投资年数。</li>
            </ul>
            <p>点击“计算”按钮以获取未来投资的价值。</p>
        </div>
        <div class="form">
            <label for="principal">本金 (元):</label>
            <input type="number" id="principal" placeholder="输入本金" step="0.01">

            <label for="rate">年利率 (%):</label>
            <input type="number" id="rate" placeholder="输入年利率" step="0.01">

            <label for="times">每年复利次数:</label>
            <select id="times">
                <option value="1">每年 1 次</option>
                <option value="2">每年 2 次</option>
                <option value="4">每年 4 次</option>
                <option value="12">每年 12 次</option>
                <option value="365">每年 365 次</option>
            </select>

            <label for="years">投资年数:</label>
            <input type="number" id="years" placeholder="输入年数" step="0.01">

            <button onclick="calculateCompoundInterest()">计算</button>

            <div class="result">
                <h2>未来投资的价值</h2>
                <p id="future-value"></p>
            </div>
        </div>
    </div>

JS:

function calculateCompoundInterest() {
    const principal = parseFloat(document.getElementById('principal').value);
    const rate = parseFloat(document.getElementById('rate').value) / 100;
    const times = parseInt(document.getElementById('times').value);
    const years = parseFloat(document.getElementById('years').value);

    if (isNaN(principal) || isNaN(rate) || isNaN(times) || isNaN(years)) {
        alert("请确保所有输入项都已填写正确！");
        return;
    }

    const futureValue = principal * Math.pow(1 + (rate / times), times * years);
    document.getElementById('future-value').textContent = `未来投资的价值: ¥${futureValue.toFixed(2)}`;
}

CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.calculator {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    max-width: 400px;
    width: 100%;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.instructions {
    margin-bottom: 20px;
    font-size: 14px;
    color: #555;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 10px;
}

label {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
    color: #555;
}

input, select {
    width: calc(100% - 10px);
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 16px;
}

button:hover {
    background-color: #45a049;
}

.result {
    margin-top: 20px;
}

p {
    font-size: 18px;
    color: #333;
}

 线上运行，可以直接打开：复利计算器

原文地址：https://blog.csdn.net/yuchangchenTT/article/details/143007643

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！