【每日一练】232—JS实现一款贷款换算计算器

每日一练11个月前发布 admin
2,207 0

第232练的最终效果如下:

【每日一练】232—JS实现一款贷款换算计算器

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}`;
  }

 

© 版权声明

相关文章

暂无评论

暂无评论...