数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 HTML、CSS 和 JavaScript 设计一个贷款 EMI 计算器？
为了设计一个贷款 EMI 计算器，我们将使用 HTML 创建 EMI 贷款计算器的基本结构，使用 CSS 设计 UI，并使用 JavaScript 添加根据用户输入的金额、年利率和时间（以月为单位）计算 EMI 的功能。
在这篇文章中，我们将了解如何使用 HTML、CSS 和 JavaScript 设计贷款 EMI 计算器的分步流程和代码。
使用 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>
使用 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 计算器的完整示例代码。
<!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 并返回输出。
更新于: 2024年9月26日
9K+ 浏览量
广告