2024年6月15日 星期六

[ChatGPT] 使用 ChatGPT 產生複利現值表 (Compound Interest Table)

 ME:
生成一個可以嵌入網頁的程式，包含4個欄位及一個產生表格的按鈕，

初始金額（本金）

利率開始（%）

利率結束（%）

時間（年或月）使用下拉式選單

按下產生表格之後，就可以顯示複利終值表的表格

並增加表格顏色，增加易讀性。

產生程式如下：

<!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;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(odd) {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #ffffff;
        }
        .input-container {
            margin-bottom: 20px;
        }
        .input-container label {
            margin-right: 10px;
        }
        button {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>複利終值表</h1>
    <div class="input-container">
        <label for="principal">初始金額（本金）:</label>
        <input type="number" id="principal" value="1000"><br>
        <label for="rateStart">利率範圍開始（%）:</label>
        <input type="number" id="rateStart" value="5" step="0.01"><br>
        <label for="rateEnd">利率範圍結束（%）:</label>
        <input type="number" id="rateEnd" value="15" step="0.01"><br>
        <label for="time">時間:</label>
        <input type="number" id="time" value="10"><br>
        <label for="frequency">計算頻率:</label>
        <select id="frequency">
            <option value="year">年</option>
            <option value="month">月</option>
        </select><br>
        <button onclick="generateTable()">產生表格</button>
    </div>
    <table id="fvTable">
        <thead>
            <tr id="tableHeader">
                <th>期數</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
        function generateTable() {
            const principal = parseFloat(document.getElementById('principal').value);
            const rateStart = parseFloat(document.getElementById('rateStart').value) / 100;
            const rateEnd = parseFloat(document.getElementById('rateEnd').value) / 100;
            const time = parseInt(document.getElementById('time').value);
            const frequency = document.getElementById('frequency').value;

            const table = document.getElementById('fvTable');
            const thead = table.querySelector('thead tr');
            const tbody = table.querySelector('tbody');
            tbody.innerHTML = '';

            // 清除之前的表頭
            while (thead.firstChild) {
                thead.removeChild(thead.firstChild);
            }

            // 生成新的表頭
            const thPeriod = document.createElement('th');
            thPeriod.textContent = '期數';
            thead.appendChild(thPeriod);

            const rateRange = [];
            for (let rate = rateStart; rate <= rateEnd; rate += 0.01) {
                rateRange.push(rate);
                const th = document.createElement('th');
                th.textContent = `${(rate * 100).toFixed(2)}%`;
                thead.appendChild(th);
            }

            let periods;
            let compoundRate;
            if (frequency === 'year') {
                periods = time;
                compoundRate = 1;
            } else {
                periods = time * 12;
                compoundRate = 12;
            }

            // 生成表格內容
            for (let n = 1; n <= periods; n++) {
                const tr = document.createElement('tr');
                const tdPeriod = document.createElement('td');
                tdPeriod.textContent = n;
                tr.appendChild(tdPeriod);

                rateRange.forEach(rate => {
                    const td = document.createElement('td');
                    const fv = principal * Math.pow(1 + rate / compoundRate, n * compoundRate);
                    td.textContent = fv.toFixed(2);
                    tr.appendChild(td);
                });

                tbody.appendChild(tr);
            }
        }
    </script>
</body>
</html>



複利終值表






期數
Labels: ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

熱門文章