如何使用 HTML、CSS 和 JavaScript 设计一个贷款 EMI 计算器？

为了设计一个贷款 EMI 计算器，我们将使用 HTML 创建 EMI 贷款计算器的基本结构，使用 CSS 设计 UI，并使用 JavaScript 添加根据用户输入的金额、年利率和时间（以月为单位）计算 EMI 的功能。

在这篇文章中，我们将了解如何使用 HTML、CSS 和 JavaScript 设计贷款 EMI 计算器的分步流程和代码。

使用 HTML 构建贷款 EMI 计算器
使用 CSS 设计贷款 EMI 计算器的 UI
使用 JavaScript 添加功能

使用 HTML 构建贷款 EMI 计算器

我们将遵循以下步骤使用 HTML 创建贷款 EMI 计算器的结构。

我们使用了三个输入框来获取用户输入的**金额**、**利率**和**时间**。
我们使用了一个按钮类型输入，它创建一个按钮来计算 EMI 并使用 span 标签显示结果。
我们将所有这些元素包装在一个父 div 中，其类名为**container**。

<div class="container">
    <h1>Loan Calculator </h1>
    <p>Loan amount: $
        <input type="number" id="amount" 
               placeholder="Enter amount">
    </p>
    <p>Rate (Interest): %
        <input step=".1" id="rate" 
               placeholder="Enter rate">
    </p>
    <p>Months (Time):
        <input type="number" id="time" 
               placeholder="Enter time">
    </p>
    <input type="button" value="Calculate" 
           id="btn" onclick="calculate()">
    <p>Total EMI: $
        <span id="output"></span>
    </p>
</div>

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

使用 CSS 设计贷款 EMI 计算器的 UI

我们将遵循以下步骤使用 CSS 设计贷款 EMI 计算器的 UI。

我们使用**container**类来设计 EMI 计算器的整体布局。
container 类使用 CSS 的 height 和 width 属性设置 EMI 计算器的尺寸，使用**"display: flex;"**使容器成为 flexbox，使用 flex-direction 垂直排列项目，并分别使用 CSS 的 justify-content 和 align-items 属性水平和垂直居中子元素。
然后，我们设置了背景颜色和文本颜色以及内边距和外边距，使容器水平居中。
我们使用**p**作为元素类型选择器来设计输入标签，设置其颜色、字体大小、字体系列和底部边距。
然后，我们使用**input**作为元素类型选择器设计所有输入字段，设置其尺寸、字体大小、内边距和顶部边距。
我们使用**#btn**来设计计算按钮，设置其最大宽度属性、颜色、光标更改为指针，并使用 align-self 属性使其自身居中。
我们使用 ::placeholder 伪元素来更改占位符的颜色。

.container {
    width: 400px;
    height: 550px;
    background-color: #031926;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;    
    padding: 30px;  
    border-radius: 10px;
    color: white;
    margin: 100px auto; 
}
p {
    color: white;
    font-size: 25px;
    font-family: Verdana, sans-serif;
    width: 100%;
    margin-bottom: 15px; 
}
h1 {
    color: white;
    align-self: center; 
    margin-bottom: 20px; 
}
input {
    height: 33px;
    width: 100%;
    background-color: white;
    font-size: 20px;
    color: #031926;
    padding: 7px;
    margin-top: 5px; 
}
#btn {
    color: #031926;
    max-width: fit-content;
    padding: 5px;
    cursor: pointer;
    margin-top: 20px; 
    align-self: center; 
}
span {
    font-weight: 20px; 
    color: white;
}
::placeholder {
    color: #031926;
}

使用 JavaScript 添加功能

我们将遵循以下步骤使用 Javascript 向 EMI 贷款计算器添加计算功能。

我们创建了一个函数**calculate**，它在点击**计算**按钮时触发。
我们初始化了三个变量来存储用户输入的金额、利率和时间的值。它使用 getElementById 方法选择相应的输入字段，并使用**value**属性获取用户输入的当前值。
我们使用公式**monthlyRate: R/12/100**计算月利率，其中 R 是用户输入的年利率。
在下一步中，我们使用公式**emi: (p*R*(1+R)^n)/((1+R)^n-1)**计算 emi，其中**R 是 monthlyRate**，**p 是金额**，**n 是以月为单位的时间**。
然后，我们使用 toFixed() 方法将结果显示到小数点后两位，并将其存储在**result**中，该结果使用 innerHTML 属性在 id 为**output**的 span 标签中显示。

function calculate() {
    let amount = document.getElementById('amount').value;
    let rate = document.getElementById('rate').value;
    let time = document.getElementById('time').value;
    let monthlyRate = rate / 12 / 100;
    let emi = (amount * monthlyRate * 
               Math.pow(1 + monthlyRate, time)) /
              (Math.pow(1 + monthlyRate, time) - 1);
    let result = emi.toFixed(2);
    document.getElementById("output").innerHTML = result;
}

完整示例代码

以下是实现上述步骤以使用 HTML、CSS 和 JavaScript 设计贷款 EMI 计算器的完整示例代码。

Open Compiler

<!DOCTYPE html>
<html>
<head>
    <title>Loan EMI Calculator</title>
    <style>
        .container {
            width: 400px;
            height: 550px;
            background-color: #031926;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; 
            align-items: flex-start;    
            padding: 30px;  
            border-radius: 10px;
            color: white;
            margin: 100px auto; 
        }
        p {
            color: white;
            font-size: 25px;
            font-family: Verdana, sans-serif;
            width: 100%;
            margin-bottom: 15px; 
        }
        h1 {
            color: white;
            align-self: center; 
            margin-bottom: 20px; 
        }
        input {
            height: 33px;
            width: 100%;
            background-color: white;
            font-size: 20px;
            color: #031926;
            padding: 7px;
            margin-top: 5px; 
        }
        #btn {
            color: #031926;
            max-width: fit-content;
            padding: 5px;
            cursor: pointer;
            margin-top: 20px; 
            align-self: center; 
        }
        span {
            font-weight: 20px; 
            color: white;
        }
        ::placeholder {
            color: #031926;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Loan EMI Calculator </h1>
        <p>Loan amount: $
            <input type="number" id="amount" 
                   placeholder="Enter amount">
        </p>
        <p>Rate (Interest): %
            <input step=".1" id="rate" 
                   placeholder="Enter rate">
        </p>
        <p>Months (Time):
            <input type="number" id="time" 
                   placeholder="Enter time">
        </p>
        <input type="button" value="Calculate" 
               id="btn" onclick="calculate()">
        <p>Total EMI: $
            <span id="output"></span>
        </p>
    </div>
    <script>
        function calculate() {
            let amount = document.getElementById('amount').value;
            let rate = document.getElementById('rate').value;
            let time = document.getElementById('time').value;
            let monthlyRate = rate / 12 / 100;
            let emi = (amount * monthlyRate * 
                       Math.pow(1 + monthlyRate, time)) /
                      (Math.pow(1 + monthlyRate, time) - 1);
            let result = emi.toFixed(2);
            document.getElementById("output").innerHTML = result;
        }
    </script>
</body>
</html>

结论

在这篇文章中，我们了解了如何使用 HTML、CSS 和 JavaScript 设计贷款 EMI 计算器。我们使用 HTML 和 CSS 创建和设计了 EMI 计算器的 UI，并使用 JavaScript 检索用户输入数据以计算 EMI 并返回输出。

Kalyan Mishra

更新于: 2024年9月26日

9K+ 浏览量

开启你的职业生涯

完成课程获得认证

立即开始