第232练的最终效果如下：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>第232练</title><link rel=”stylesheet” href=”index.css”></head><body><div class=”container”><h1>贷款计算器</h1><p>贷款金额 ¥：<input onchange=”calculateLoan()” class=”input” type=”number” id=”loan-amount” min=”1″ max=”500000″ value=”10000″></p><p>银行利率 %<input onchange=”calculateLoan()” class=”input” type=”number” id=”interest-rate” min=”0″ max=”100″ value=”10″ step=”.1″></p><p>贷款月数<input onchange=”calculateLoan()” class=”input” type=”number” id=”months-to-pay” min=”6″ max=”48″ value=”12″></p><p class=”payment” id=”payment”>每月支付金额:</p></div><script src=”index.js”></script></body></html>
CSS:
body{padding: 0;margin: 0;display: flex;height: 100vh;justify-content: center;align-items: center;font-family: ‘Courier New’, Courier, monospace;}.container{background: #00a6bc;color: aliceblue;padding: 20px;border-radius: 10px;}.input{width: 100%;font-size: 20px;height: 30px;}.payment{font-weight: 600;font-size: 20px;}
JS:
function calculateLoan() {loanAmountValue = document.getElementById(“loan-amount”).value;interestRateValue = document.getElementById(“interest-rate”).value;MonthsToPayValue = document.getElementById(“months-to-pay”).value;interest = (loanAmountValue * (interestRateValue * 0.01)) / MonthsToPayValue;monthlyPayment = (loanAmountValue / MonthsToPayValue + interest).toFixed(2);document.getElementById(“payment”).innerHTML = `每月支付: ${monthlyPayment}`;}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
