极客教程如何使用HTML CSS JavaScript创建薪资管理网页
在本文中，我们将使用Javascript创建一个薪资管理网页。在这个项目中，我们将学习和搞清楚基本的javascript概念。
先决条件： 此项目的先决条件为：
- ES6 Javascript
- 查询选择器
方法： 为了创建我们的薪资管理网页，我们将输入账单金额并处理错误情况，以便在有人使用账单金额的负值或超过给定金额时抛出错误。然后，我们将应用我们的主要逻辑，以在输出表格中显示返回给用户的最少票据数量。这个网页实际上会计算客户将作为余额退还的最少金额票据的数量。假设账单金额为500，你有个2000卢比，这个网页会计算出要退还给用户的最少票据数量。
基本设置： 打开VS Code，打开一个你想在其中创建此项目的文件夹，并给它一个名称（文件夹名称）。在打开的文件夹中创建以下文件：
-
index.js
- index.html
-
style.css
项目结构： 应该是这样的：
步骤1： 首先我们将在 index.html 中创建一个HTML结构。这是连接到 style.css 文件用于样式化和 index.js 用于网站中的逻辑操作的主页。
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">
</head>
<body>
<div class="container">
<header><strong>
<center>Pay Role Management</center>
</strong></header>
<p class="description">
Enter the bill amount and the cash given
by the customer and know minimum number
of notes to return
</p>
<label for="input-bill">
<strong>Enter the bill amount</strong>
</label>
<input class="input-bill" id="bill" />
<label for="cash-given">
<strong> Cash Given</strong>
</label>
<input class="cash-given" id="cash" />
<button class="check-btn" id="btn">Check</button>
<p id="error">
</p>
<table class="table">
<caption>
<strong>Return Change</strong>
</caption>
<tr class="row">
<th class="row">No of Notes</th>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
</tr>
<tr>
<th class="row">Notes</th>
<td class="row">2000</td>
<td class="row">500</td>
<td class="row">100</td>
<td class="row">20</td>
<td class="row">10</td>
<td class="row">5</td>
<td class="row">1</td>
</tr>
</table>
</div>
</body>
</html>
步骤2： 现在，在javascript文件中，我们将获取按钮的id以及输入和输出的数字，然后将其放入inner Html。现金余额的逻辑部分是尽可能地提供最少数量的钞票。
- 计算剩余值，即输入金额-账单金额。
- 处理错误。
- 在票据数组中运行循环，并计算最小票据数。在javascript中，trunc()是一个函数，用于截断（切断）圆点以及右侧的数字。
- 最后，根据票据的索引（noOfNotes），显示输出。
index.js
var inputBill = document.getElementById("bill");
var cashGiven = document.getElementById("cash");
var checkBtn = document.getElementById("btn");
var errMsg = document.getElementById("error");
var noOfNotes = document.querySelectorAll(".no-of-notes");
var notes = [2000, 500, 100, 20, 10, 5, 1];
function errorHandle(error) {
errMsg.style.display = "block";
errMsg.innerText = error;
}
function hideMessage() {
errMsg.style.display = "none";
}
function clickHandler() {
hideMessage();
if (inputBill.value < 0) {
errorHandle("Please Enter a positive value");
} else {
var remaining = cashGiven.value - inputBill.value;
if (remaining < 0) {
errorHandle("Give me more");
} else {
for (var i = 0; i < notes.length; i++) {
const paisa = Math.trunc(remaining / notes[i]);
remaining %= notes[i];
noOfNotes[i].innerText = paisa;
}
}
}
}
checkBtn.addEventListener("click", clickHandler);
步骤 3: 现在我们要对网页进行样式设置。这里给主容器添加了内边距并将显示设置为弹性布局，方向设置为列，背景颜色为蓝色。我们还用实线黑色边框了表格，并对按钮进行了样式设置。
style.css
.container {
display: flex;
flex-direction: column;
width: 25vw;
margin-left: 500px;
padding: 50px;
background-color: aqua;
}
.table {
border: 2px solid black;
}
.row {
border: 2px solid black;
}
.no-of-notes {
border: 2px solid black;
}
.check-btn {
margin-top: 35px;
padding: 5px;
}
.input-bill {
margin-top: 35px;
padding: 5px;
}
.cash-given {
margin-top: 35px;
padding: 5px;
}
最终代码： 将上述三个代码部分即HTML、CSS和JavaScript部分合并后，我们将得到所需的结果。
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">
<style>
.container {
display: flex;
flex-direction: column;
width: 25vw;
margin-left: 500px;
padding: 50px;
background-color: aqua;
}
.table {
border: 2px solid black;
}
.row {
border: 2px solid black;
}
.no-of-notes {
border: 2px solid black;
}
.check-btn {
margin-top: 35px;
padding: 5px;
}
.input-bill {
margin-top: 35px;
padding: 5px;
}
.cash-given {
margin-top: 35px;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<header><strong>
<center>Pay Role Management</center>
</strong></header>
<p class="description">
Enter the bill amount and the cash given by the customer
and know minimum number of notes to return
</p>
<label for="input-bill"><strong>Enter the bill amount</strong></label>
<input class="input-bill" id="bill" />
<label for="cash-given"><strong> Cash Given</strong></label>
<input class="cash-given" id="cash" />
<button class="check-btn" id="btn">Check</button>
<p id="error">
</p>
<table class="table">
<caption>
<strong>Return Change</strong></caption>
<tr class="row">
<th class="row">No of Notes</th>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
<td class="no-of-notes"></td>
</tr>
<tr>
<th class="row">Notes</th>
<td class="row">2000</td>
<td class="row">500</td>
<td class="row">100</td>
<td class="row">20</td>
<td class="row">10</td>
<td class="row">5</td>
<td class="row">1</td>
</tr>
</table>
</div>
<script>
var inputBill = document.getElementById("bill");
var cashGiven = document.getElementById("cash");
var checkBtn = document.getElementById("btn");
var errMsg = document.getElementById("error");
var noOfNotes = document.querySelectorAll(".no-of-notes");
var notes = [2000, 500, 100, 20, 10, 5, 1];
function errorHandle(error) {
errMsg.style.display = "block";
errMsg.innerText = error;
}
function hideMessage() {
errMsg.style.display = "none";
}
function clickHandler() {
hideMessage();
if (inputBill.value < 0) {
errorHandle("Please Enter a positive value");
} else {
var remaining = cashGiven.value - inputBill.value;
if (remaining < 0) {
errorHandle("Give me more");
} else {
for (var i = 0; i < notes.length; i++) {
const paisa = Math.trunc(remaining / notes[i]);
remaining %= notes[i];
noOfNotes[i].innerText = paisa;
}
}
}
}
checkBtn.addEventListener("click", clickHandler);
</script>
</body>
</html>
输出： 在VS Code中安装Live Server扩展。点击Live Server，我们的网站现在已经准备好了。
