資料結構
網路
關係資料庫管理系統
作業系統
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+ 瀏覽量
廣告