建立一個貸款計算器網站-css教學-PHP中文網

建立一個貸款計算器網站

王林

發布： 2024-08-27 18:01:14

原創

661 人瀏覽過

Build a Loan Calculator Website

介紹

開發者們大家好！我很高興向大家展示我的最新項目：貸款計算器。對於有興趣使用 JavaScript 創建實用的互動式貸款計算器的人來說，該專案是理想的選擇。這是學習處理使用者輸入和在網路上執行財務計算的絕佳方式。

項目概況

貸款計算器是一個基於網路的工具，可以根據貸款金額、利率和還款月數計算每月的貸款還款額。本專案示範如何使用 HTML、CSS 和 JavaScript 建立具有簡潔且使用者友善介面的金融工具。

特徵

動態計算：依照使用者輸入自動計算並顯示每月付款。
使用者輸入處理：允許使用者輸入和調整貸款金額、利率和還款期限。
響應式設計：計算器的設計風格具有視覺吸引力，並且可在各種裝置上使用。

使用的技術

HTML：提供貸款計算器的結構。
CSS：設定計算器的樣式，以確保其視覺吸引力且使用者友好。
JavaScript：處理計算貸款付款並依照使用者輸入更新顯示的邏輯。

專案結構

以下是項目結構的概述：

Loan-Calculator/
├── index.html
├── style.css
└── script.js

登入後複製

index.html：包含貸款計算器的 HTML 結構。
style.css：包含 CSS 樣式以創建現代且響應式的設計。
script.js：管理計算功能並更新顯示。

安裝

要開始該項目，請按照以下步驟操作：

複製儲存庫：

git clone https://github.com/abhishekgurjar-in/Loan-Calculator.git

登入後複製

開啟專案目錄:
```
cd Loan-Calculator
```
登入後複製
運行項目:
- 在網頁瀏覽器中開啟index.html檔案以查看貸款計算器。

用法

在網頁瀏覽器中開啟網站。
輸入貸款金額、利率和還款月數。
查看輸入欄位下方顯示的計算出的每月付款。

程式碼說明

超文本標記語言

index.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>Loan Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Loan Calculator</h1>
        <p>Loan Amount $ 
            <input onchange="calculateLoan()" class="input" type="number" id="loan-amount" min="1" max="500000" value="10000">
        </p>
        <p>Interest Rate % 
            <input onchange="calculateLoan()" class="input" type="number" id="interest-rate" min="0" max="100" value="10" step=".1">
        </p>
        <p>Months to pay 
            <input onchange="calculateLoan()" class="input" type="number" id="months-to-pay" min="6" max="48" value="12">
        </p>
        <p class="payment" id="payment">Monthly Payment:</p>
    </div>
    <div class="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
</body>
</html>

登入後複製

CSS

style.css 檔案設計了貸款計算器的樣式，使其有吸引力且易於使用。以下是一些關鍵樣式：

body {
    background: #4285f4;
    padding: 0;
    margin: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.container {
    background: black;
    color: aliceblue;
    padding: 20px;
    border-radius: 10px;
}

.input {
    width: 100%;
    font-size: 20px;
    height: 30px;
}

.payment {
    font-weight: 600;
    font-size: 20px;
}

.footer {
    color: white;
    margin-top: 120px;
    text-align: center;
}

登入後複製

JavaScript

script.js 檔案包含計算貸款付款和更新顯示的邏輯。這是一個片段：

function calculateLoan() {
    let loanAmountValue = document.getElementById("loan-amount").value;
    let interestRateValue = document.getElementById("interest-rate").value;
    let MonthsToPayValue = document.getElementById("months-to-pay").value;

    let interest = (loanAmountValue * (interestRateValue * 0.01)) / MonthsToPayValue;
    let monthlyPayment = (loanAmountValue / MonthsToPayValue + interest).toFixed(2);

    document.getElementById("payment").innerHTML = `Monthly Payment: ${monthlyPayment}`;
}

登入後複製