建立一个小费计算器网站-css教程-PHP中文网

建立一个小费计算器网站

PHPz

发布： 2024-08-19 04:24:05

原创

692 人浏览过

Build a Tip Calculator Website

介绍

各位开发者大家好！我很高兴向大家介绍我的最新项目：一个简单而方便的小费计算器。该项目是练习基本 JavaScript 概念的绝佳机会，例如处理用户输入、执行计算和动态更新 DOM。无论您是 JavaScript 新手还是正在寻找一个小项目来提高您的技能，这个小费计算器都是一个不错的选择。

项目概况

小费计算器是一个基于网络的应用程序，允许用户根据账单金额和小费百分比快速计算支付总额，包括小费。该项目演示了如何创建交互式用户界面、管理计算并向用户提供实时反馈。

特征

用户友好的界面：简单直观的设计，易于使用。
实时计算：输入账单和小费百分比即可立即计算总金额。
响应式设计：布局可适应不同的屏幕尺寸，确保桌面和移动设备上的无缝体验。
重置功能：用户可以轻松重置输入字段并开始新的计算。

使用的技术

HTML：构建网页和输入元素。
CSS：设置界面样式，确保简洁且响应灵敏的设计。
JavaScript：处理计算逻辑并实时更新总量。

项目结构

以下是项目结构的快速浏览：

Tip-Calculator/
├── index.html
├── styles.css
└── script.js

登录后复制

index.html：包含小费计算器的 HTML 结构。
styles.css：包含 CSS 样式以增强计算器的外观。
script.js：管理计算逻辑和动态更新。

安装

要开始该项目，请按照以下步骤操作：

克隆存储库：

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

登录后复制

打开项目目录:
```
cd Tip-Calculator
```
登录后复制
运行项目:
- 在网络浏览器中打开index.html 文件以开始使用小费计算器。

用法

在网络浏览器中打开网站。
在指定的输入字段中输入帐单金额。
输入要添加到账单中的小费百分比。
点击“计算”按钮查看包括小费在内的总金额。
如果您想开始新的计算，请重置字段。

代码说明

超文本标记语言

index.html 文件提供了小费计算器的基本结构，包括账单金额和小费百分比的输入字段，以及触发计算的按钮。这是一个片段：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tip Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>

<body>
    <div class="container">
        <h1>Tip Calculator</h1>
        <p>Enter the bill amount and tip percentage to calculate the total amount</p>

        <label for="bill">Bill amount:</label>
        <input type="number" id="bill">
        <br>

        <label for="tip">Tip percentage:</label>
        <input type="number" id="tip">
        <br>

        <button id="calculate">Calculate</button>
        <br>

        <label for="total">Total Amount:</label>
        <span id="total"></span>
    </div>

    <div class="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
</body>

</html>

登录后复制

CSS

styles.css 文件设置小费计算器的样式，提供干净且响应式的布局。以下是一些关键样式：

* {
    box-sizing: border-box;
}

body {
    color: white;
    background-color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    background-color: rgb(0, 0, 0);
    max-width: 600px;
    margin: 100px auto;
    padding: 20px;
    box-shadow: inset;
    border-radius: 10px;
}

h1 {
    text-align: center;
}

input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 10px 0;
    width: 100%;
}

button {
    background-color: green;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    margin: 10px 0;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
}

button:hover {
    background-color: #45a049;
}

#total {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

.footer {
    margin: 70px;
    text-align: center;
    color: black;
}

登录后复制

JavaScript

script.js 文件处理计算逻辑，根据用户输入更新总量。这是一个片段：

const btn = document.getElementById("calculate");
const inputBill = document.getElementById("bill");
const inputTip = document.getElementById("tip");
const totalSpan = document.getElementById("total");

function calculateTotal() {
    const billValue = parseFloat(inputBill.value);
    const tipValue = parseFloat(inputTip.value);
    const totalValue = billValue * (1 + tipValue / 100);
    totalSpan.innerText = totalValue.toFixed(2);
}

btn.addEventListener("click", calculateTotal);

登录后复制