建立一个小费计算器网站

介绍

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

项目概况

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

特征

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

使用的技术

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

项目结构

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

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

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

安装

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

1. 克隆存储库：
   

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

2. 打开项目目录:
   

   cd Tip-Calculator
   

3. 运行项目:

   • 在网络浏览器中打开index.html 文件以开始使用小费计算器。

用法

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

代码说明

超文本标记语言

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

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923

93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7Tip Calculator6e916e0f7d1e588d4f442bf645aedb2f
    e4bb307b77bfd1a1ec7fd6c485d2bfb1
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
        4a249f0d628e2318394fd9b75b4636b1Tip Calculator473f0a7621bec819994bb5020d29372a
        e388a4556c0f65e1904146cc1a846beeEnter the bill amount and tip percentage to calculate the total amount94b3e26ee717c64999d7867364b1b4a3

        da55a23ba75f1a91499fd53db6dde99fBill amount:8c1ecd4bb896b2264e0711597d40766c
        da68c775d7dd560fd6878751c0c9e570
        0c6dc11e160d3b678d68754cc175188a

        54616200344afdb89867e9df0f118122Tip percentage:8c1ecd4bb896b2264e0711597d40766c
        2f56d4979a58a88631c556197730f8be
        0c6dc11e160d3b678d68754cc175188a

        c64b5582d11b3d494d9cfa5ac00d34dbCalculate65281c5ac262bf6d81768915a4a77ac0
        0c6dc11e160d3b678d68754cc175188a

        f42db1d3de5697d736e79e701ac6f5b5Total Amount:8c1ecd4bb896b2264e0711597d40766c
        2999737d3770e77603f9c3571ac488af54bdf357c58b8a65c66d7c19c8e4d114
    16b28748ea4df4d9c2150843fecfba68

    ffd6ba4147bda351239915f463e46e38
        e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

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);

现场演示

您可以在此处查看小费计算器的现场演示。

结论

构建这个小费计算器是一次有趣且具有教育意义的体验，它增强了我对 JavaScript 的理解，特别是在创建交互式 Web 应用程序方面。我希望这个项目能够激励您尝试 JavaScript 并构建您自己的有用工具。快乐编码！

制作人员

这个项目是我不断提高 Web 开发技能的一部分，重点是 JavaScript 和 DOM 操作。

作者

• 阿布舍克·古贾尔
  • GitHub 简介

以上是建立一个小费计算器网站的详细内容。更多信息请关注PHP中文网其他相关文章！