利率計算前端小程序
視圖效果展示如下：
在這里插入代碼片
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>貸款計算器</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><script>tailwind.config = {theme: {extend: {colors: {primary: '#3b82f6',secondary: '#f97316',neutral: '#f8fafc',dark: '#1e293b'},fontFamily: {inter: ['Inter', 'sans-serif'],},}}}</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.card-shadow {box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);}.btn-hover {transition: all 0.3s ease;}.btn-hover:hover {transform: translateY(-2px);box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);}.input-focus {transition: all 0.2s ease;}.input-focus:focus {border-color: #3b82f6;box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);}.fade-in {animation: fadeIn 0.5s ease-in-out;}@keyframes fadeIn {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }}}</style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col"><!-- 導航欄 --><header class="bg-white shadow-sm sticky top-0 z-50"><div class="container mx-auto px-4 py-4 flex justify-between items-center"><div class="flex items-center space-x-2"><i class="fa-solid fa-calculator text-primary text-2xl"></i><h1 class="text-xl md:text-2xl font-bold text-dark">貸款計算器</h1></div><nav><ul class="flex space-x-6"><li><a href="#" class="text-gray-600 hover:text-primary transition-colors">首頁</a></li><li><a href="#" class="text-gray-600 hover:text-primary transition-colors">貸款指南</a></li><li><a href="#" class="text-gray-600 hover:text-primary transition-colors">聯系我們</a></li></ul></nav></div></header><main class="flex-grow container mx-auto px-4 py-8"><!-- 介紹部分 --><section class="mb-10 text-center max-w-3xl mx-auto"><h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-dark">海內存知己天涯若比鄰</h2><p class="text-gray-600 text-lg">輸入貸款信息，選擇還款方式，立即獲取詳細的還款計劃，幫助您更好地規劃財務。</p></section><div class="grid grid-cols-1 lg:grid-cols-3 gap-8"><!-- 表單部分 --><section class="lg:col-span-1 bg-white rounded-xl p-6 card-shadow fade-in"><h3 class="text-xl font-bold mb-6 text-dark flex items-center"><i class="fa-solid fa-pencil-square text-primary mr-2"></i>貸款信息</h3><form id="loanForm" class="space-y-5"><div class="space-y-2"><label for="loanAmount" class="block text-sm font-medium text-gray-700">貸款金額 (元)</label><div class="relative"><span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"><i class="fa-solid fa-money-bill-wave"></i></span><input type="number" id="loanAmount" name="loanAmount" min="1" step="any" class="pl-10 w-full rounded-lg border-gray-300 shadow-sm input-focus py-3 px-4 border focus:outline-none" placeholder="請輸入貸款金額" required></div></div><div class="space-y-2"><label for="loanTerm" class="block text-sm font-medium text-gray-700">貸款年限</label><div class="relative"><span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"><i class="fa-solid fa-calendar"></i></span><input type="number" id="loanTerm" name="loanTerm" min="1" max="30" step="any" class="pl-10 w-full rounded-lg border-gray-300 shadow-sm input-focus py-3 px-4 border focus:outline-none" placeholder="請輸入貸款年限" required></div></div><div class="space-y-2"><label for="interestRate" class="block text-sm font-medium text-gray-700">貸款利率 (%)</label><div class="relative"><span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"><i class="fa-solid fa-percent"></i></span><input type="number" id="interestRate" name="interestRate" min="0.01" step="0.01" class="pl-10 w-full rounded-lg border-gray-300 shadow-sm input-focus py-3 px-4 border focus:outline-none" placeholder="請輸入年利率" required></div></div><div class="space-y-2"><label for="repaymentType" class="block text-sm font-medium text-gray-700">還款方式</label><div class="relative"><span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"><i class="fa-solid fa-list-ul"></i></span><select id="repaymentType" name="repaymentType" class="pl-10 w-full rounded-lg border-gray-300 shadow-sm input-focus py-3 px-4 border focus:outline-none appearance-none bg-white"><option value="equal-principal-interest">等額本息</option><option value="equal-principal">等額本金</option></select><div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500"><i class="fa-solid fa-chevron-down"></i></div></div></div><div class="space-y-2"><label for="timeUnit" class="block text-sm font-medium text-gray-700">還款周期</label><div class="relative"><span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"><i class="fa-solid fa-clock"></i></span><select id="timeUnit" name="timeUnit" class="pl-10 w-full rounded-lg border-gray-300 shadow-sm input-focus py-3 px-4 border focus:outline-none appearance-none bg-white"><option value="year">年</option><option value="month">月</option></select><div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500"><i class="fa-solid fa-chevron-down"></i></div></div></div><button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg btn-hover transition-all duration-300 flex items-center justify-center"><i class="fa-solid fa-calculator mr-2"></i>計算還款計劃</button></form></section><!-- 結果展示部分 --><section class="lg:col-span-2 bg-white rounded-xl p-6 card-shadow fade-in"><h3 class="text-xl font-bold mb-6 text-dark flex items-center"><i class="fa-solid fa-table text-primary mr-2"></i>還款計劃</h3><div id="summary" class="mb-8 bg-blue-50 rounded-lg p-5 border-l-4 border-primary hidden"><div class="grid grid-cols-1 md:grid-cols-3 gap-4"><div class="text-center"><p class="text-sm text-gray-600 mb-1">貸款總額</p><p class="text-xl font-bold text-dark" id="totalLoanAmount">￥0.00</p></div><div class="text-center"><p class="text-sm text-gray-600 mb-1">總支付利息</p><p class="text-xl font-bold text-dark" id="totalInterest">￥0.00</p></div><div class="text-center"><p class="text-sm text-gray-600 mb-1">還款總額</p><p class="text-xl font-bold text-dark" id="totalPayment">￥0.00</p></div></div></div><div id="paymentScheduleContainer" class="overflow-x-auto"><table id="paymentSchedule" class="min-w-full divide-y divide-gray-200 hidden"><thead class="bg-gray-50"><tr><th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">期數</th><th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">還款本金</th><th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">還款利息</th><th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">還款總額</th></tr></thead><tbody class="bg-white divide-y divide-gray-200" id="paymentScheduleBody"><!-- 表格內容將通過JavaScript動態生成 --></tbody></table></div><div id="noResult" class="py-16 text-center"><div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 mb-4"><i class="fa-solid fa-calculator text-primary text-2xl"></i></div><h4 class="text-lg font-medium text-gray-900 mb-2">請輸入貸款信息并計算</h4><p class="text-gray-500 max-w-md mx-auto">填寫左側表單并點擊"計算還款計劃"按鈕，即可查看詳細的還款計劃</p></div></section></div></main><footer class="bg-dark text-white py-8 mt-10"><div class="container mx-auto px-4"><div class="grid grid-cols-1 md:grid-cols-3 gap-8"><div><h3 class="text-lg font-bold mb-4">貸款計算器</h3><p class="text-gray-400">幫助您輕松計算各種貸款的還款計劃，做出明智的財務決策。</p></div><div><h3 class="text-lg font-bold mb-4">快速鏈接</h3><ul class="space-y-2"><li><a href="#" class="text-gray-400 hover:text-white transition-colors">首頁</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors">貸款指南</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors">聯系我們</a></li></ul></div><div><h3 class="text-lg font-bold mb-4">聯系我們</h3><ul class="space-y-2"><li class="flex items-center"><i class="fa-solid fa-envelope text-primary mr-2"></i><a href="mailto:support@loancalculator.com" class="text-gray-400 hover:text-white transition-colors">support@loancalculator.com</a></li><li class="flex items-center"><i class="fa-solid fa-phone text-primary mr-2"></i><a href="tel:+8612345678901" class="text-gray-400 hover:text-white transition-colors">+86 123 4567 8901</a></li></ul></div></div><div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"><p>© 2025 貸款計算器 版權所有</p></div></div></footer><script>document.addEventListener('DOMContentLoaded', function() {const loanForm = document.getElementById('loanForm');const paymentSchedule = document.getElementById('paymentSchedule');const paymentScheduleBody = document.getElementById('paymentScheduleBody');const summary = document.getElementById('summary');const noResult = document.getElementById('noResult');const totalLoanAmount = document.getElementById('totalLoanAmount');const totalInterest = document.getElementById('totalInterest');const totalPayment = document.getElementById('totalPayment');loanForm.addEventListener('submit', function(e) {e.preventDefault();// 獲取表單值const loanAmount = parseFloat(document.getElementById('loanAmount').value);const loanTerm = parseFloat(document.getElementById('loanTerm').value);const interestRate = parseFloat(document.getElementById('interestRate').value);const repaymentType = document.getElementById('repaymentType').value;const timeUnit = document.getElementById('timeUnit').value;// 計算還款計劃let schedule = [];let totalInterestAmount = 0;if (repaymentType === 'equal-principal-interest') {// 等額本息[schedule, totalInterestAmount] = calculateEqualPrincipalInterest(loanAmount, loanTerm, interestRate, timeUnit);} else {// 等額本金[schedule, totalInterestAmount] = calculateEqualPrincipal(loanAmount, loanTerm, interestRate, timeUnit);}// 顯示結果displayResults(schedule, loanAmount, totalInterestAmount);});// 等額本息計算function calculateEqualPrincipalInterest(principal, years, annualRate, timeUnit) {const rate = annualRate / 100;let periods;let ratePerPeriod;if (timeUnit === 'year') {periods = years;ratePerPeriod = rate;} else {periods = years * 12;ratePerPeriod = rate / 12;}// 計算每期還款額const payment = principal * ratePerPeriod * Math.pow(1 + ratePerPeriod, periods) / (Math.pow(1 + ratePerPeriod, periods) - 1);let schedule = [];let remainingPrincipal = principal;let totalInterest = 0;for (let i = 1; i <= periods; i++) {const interest = remainingPrincipal * ratePerPeriod;const principalPayment = payment - interest;remainingPrincipal -= principalPayment;// 最后一期調整可能的浮點數精度問題if (i === periods && Math.abs(remainingPrincipal) < 0.01) {remainingPrincipal = 0;}totalInterest += interest;schedule.push({period: i,principal: principalPayment,interest: interest,total: payment,remaining: remainingPrincipal});}return [schedule, totalInterest];}// 等額本金計算function calculateEqualPrincipal(principal, years, annualRate, timeUnit) {const rate = annualRate / 100;let periods;let ratePerPeriod;if (timeUnit === 'year') {periods = years;ratePerPeriod = rate;} else {periods = years * 12;ratePerPeriod = rate / 12;}const principalPayment = principal / periods;let remainingPrincipal = principal;let totalInterest = 0;let schedule = [];for (let i = 1; i <= periods; i++) {const interest = remainingPrincipal * ratePerPeriod;const payment = principalPayment + interest;remainingPrincipal -= principalPayment;// 最后一期調整可能的浮點數精度問題if (i === periods && Math.abs(remainingPrincipal) < 0.01) {remainingPrincipal = 0;}totalInterest += interest;schedule.push({period: i,principal: principalPayment,interest: interest,total: payment,remaining: remainingPrincipal});}return [schedule, totalInterest];}// 顯示計算結果function displayResults(schedule, principal, totalInterestAmount) {// 清空表格paymentScheduleBody.innerHTML = '';// 顯示結果區域，隱藏無結果提示paymentSchedule.classList.remove('hidden');summary.classList.remove('hidden');noResult.classList.add('hidden');// 填充表格schedule.forEach(payment => {const row = document.createElement('tr');row.className = 'hover:bg-gray-50 transition-colors';// 添加動畫延遲row.style.animation = `fadeIn 0.5s ease-in-out ${payment.period * 0.05}s forwards`;row.style.opacity = '0';row.innerHTML = `<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${payment.period}</td><td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">￥${payment.principal.toFixed(2)}</td><td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">￥${payment.interest.toFixed(2)}</td><td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">￥${payment.total.toFixed(2)}</td>`;paymentScheduleBody.appendChild(row);});// 更新摘要信息totalLoanAmount.textContent = `￥${principal.toFixed(2)}`;totalInterest.textContent = `￥${totalInterestAmount.toFixed(2)}`;totalPayment.textContent = `￥${(principal + totalInterestAmount).toFixed(2)}`;// 滾動到結果區域paymentSchedule.scrollIntoView({ behavior: 'smooth', block: 'start' });}});</script>
</body>
</html>
這里是版本二：視圖效果如下
下面是源碼
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>貸款計算器</title><style>body {font-family: Arial, sans-serif;max-width: 1000px;margin: 20px auto;padding: 20px;}.input-group {margin: 10px 0;display: flex;align-items: center;gap: 10px;}input, select {padding: 8px;border: 1px solid #ddd;border-radius: 4px;}button {padding: 10px 20px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;}button:hover {background-color: #45a049;}table {width: 100%;margin-top: 20px;border-collapse: collapse;}th, td {border: 1px solid #ddd;padding: 8px;text-align: center;}th {background-color: #f2f2f2;}</style>
</head>
<body><div class="input-group"><label>貸款金額：</label><input type="number" id="amount" placeholder="元"><label>貸款年限：</label><input type="number" id="years" placeholder="年"><label>貸款利率：</label><input type="number" id="rate" placeholder="%" step="0.01"><select id="method"><option value="equalPrincipalAndInterest">等額本息</option><option value="equalPrincipal">等額本金</option></select><select id="unit"><option value="year">按年顯示</option><option value="month">按月顯示</option></select><button onclick="calculate()">計算</button></div><table id="resultTable"><thead><tr><th>期數</th><th>還款本金</th><th>還款利息</th><th>還款總額</th></tr></thead><tbody id="resultBody"></tbody></table><script>function calculate() {// 獲取輸入值const amount = parseFloat(document.getElementById('amount').value);const years = parseFloat(document.getElementById('years').value);const rate = parseFloat(document.getElementById('rate').value) / 100;const method = document.getElementById('method').value;const unit = document.getElementById('unit').value;// 輸入驗證if (!amount || !years || !rate) {alert('請輸入完整有效的數值');return;}// 計算總月數const totalMonths = years * 12;let results = [];if (method === 'equalPrincipalAndInterest') {// 等額本息計算const monthlyRate = rate / 12;const monthlyPayment = (amount * monthlyRate * Math.pow(1 + monthlyRate, totalMonths)) / (Math.pow(1 + monthlyRate, totalMonths) - 1);let remaining = amount;for (let i = 1; i <= totalMonths; i++) {const interest = remaining * monthlyRate;const principal = monthlyPayment - interest;remaining -= principal;results.push({principal: principal,interest: interest,total: principal + interest});}} else {// 等額本金計算const monthlyPrincipal = amount / totalMonths;let remaining = amount;for (let i = 1; i <= totalMonths; i++) {const interest = remaining * rate / 12;remaining -= monthlyPrincipal;results.push({principal: monthlyPrincipal,interest: interest,total: monthlyPrincipal + interest});}}// 處理顯示單位const displayResults = [];if (unit === 'year') {// 按年匯總for (let year = 0; year < years; year++) {let yearPrincipal = 0;let yearInterest = 0;for (let month = 0; month < 12; month++) {const index = year * 12 + month;if (index >= results.length) break;yearPrincipal += results[index].principal;yearInterest += results[index].interest;}displayResults.push({principal: yearPrincipal,interest: yearInterest,total: yearPrincipal + yearInterest});}} else {// 直接使用月度數據displayResults.push(...results);}// 顯示結果const tbody = document.getElementById('resultBody');tbody.innerHTML = '';displayResults.forEach((item, index) => {const row = `<tr><td>${index + 1}</td><td>${item.principal.toFixed(2)}</td><td>${item.interest.toFixed(2)}</td><td>${item.total.toFixed(2)}</td></tr>`;tbody.innerHTML += row;});}</script>
</body>
</html>
完結！
![[ 計算機網絡 ] | 宏觀談談計算機網絡](http://pic.xiahunao.cn/[ 計算機網絡 ] | 宏觀談談計算機網絡)
