如何使用 JavaScript 创建薪资管理网页？-猿码集

介绍

薪资管理是每个公司及企业必须要管理的一项基础工作。现如今，许多企业都使用电子化工具来进行薪资管理工作，使得整个薪酬结构更为清晰、透明，并且方便查询和分析。本文将介绍如何使用 JavaScript 来创建一个基础的薪资管理网页。在这个网页中，你可以轻松地输入员工的薪资信息、计算员工的薪资总额、以及薪资的平均值和最高值等等。

网站需求分析

页面结构

在起步阶段，我们先来讨论一下这个薪资管理网页应该有些什么样的页面结构。

我们将会需要：

一个表单用于输入员工的薪资信息

一个区域来显示员工信息

一个区域来显示薪资总额、平均值和最高值

技术分析

下一步，我们来一起考虑使用什么技术工具来构建这个网站。根据我们的需求，我们需要使用 HTML、CSS 和 JavaScript 这三项技术。HTML 和 CSS 是用来构建网页外观和样式的，而 JavaScript 则是用来计算薪资总额、平均值和最高值的逻辑工具。

网站设计与实现

网站基本结构

在您的 IDE 或文本编辑器中新建一个 HTML 文件。我们来梳理一下基本的 HTML 结构，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>薪资管理系统</title>
</head>
<body>
</body>
</html>

网站外观设计

让我们来添加一些样式来提高网站的外观吧。我们来创建一个 CSS 文件来处理样式问题，示例代码如下：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: #f1f1f1;
    font-family: Arial, Helvetica, sans-serif;
}
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

现在我们的网页结构看起来是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>薪资管理系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        
    </div>
</body>
</html>

表单设计

现在，让我们来设计表单吧。下面是一个简单的表单示例，包含姓名和工资两个输入框：

<form id="employee-form">
    <h2>输入员工薪资信息</h2>
    <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名">
    </div>
    <div>
        <label for="salary">工资:</label>
        <input type="number" id="salary" name="salary" placeholder="请输入工资">
    </div>
    <div>
        <button type="submit">添加员工</button>
    </div>
</form>

在表单中，我们设置了一个 ID 为 employee-form 的表单，并包含了两个输入框：姓名和工资。我们还设置了一个添加员工的按钮。

显示列表设计

我们需要一个区域来显示员工列表。示例代码如下：

<div id="employee-list">
    <h2>员工薪资信息列表</h2>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>工资</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="employees">
           
        </tbody>
    </table>
</div>

在这个区域中，我们设置了一个表格来显示员工的列表。在表格中，我们列出了“姓名”、“工资”和“删除”这三个标题。在 tbody 标签中，我们还设置了一个 ID 为 employees 的空列表，用于容纳我们动态添加的员工信息。

薪资计算设计

最后，根据员工列表，我们需要计算一些薪资统计数据，例如薪资总额、平均值和最高值。示例代码如下：

<div id="employee-calculations">
    <h2>薪资统计</h2>
    <div>
        <label>员工总数:</label>
        <span id="employee-count">0</span>
    </div>
    <div>
        <label>薪资总额:</label>
        <span id="total-salary">0</span>
    </div>
    <div>
        <label>平均工资:</label>
        <span id="average-salary">0</span>
    </div>
    <div>
        <label>最高工资:</label>
        <span id="highest-salary">0</span>
    </div>
</div>

现在这个网站骨架已经搭建完成。接下来我们来添加 JavaScript 代码，实现这个网站的核心功能 --- 薪资计算功能。

薪资计算逻辑

第一步是添加薪资计算的逻辑。我们会使用一个数组来存储输入表单中的员工信息，使用一个函数来处理这个数组并计算薪资统计数据。示例代码如下：

const employeeForm = document.getElementById("employee-form");
const employeeList = document.getElementById("employees");
const employeeCount = document.getElementById("employee-count");
const totalSalary = document.getElementById("total-salary");
const averageSalary = document.getElementById("average-salary");
const highestSalary = document.getElementById("highest-salary");
let employees = [];
function addEmployee(event) {
  event.preventDefault();
  const nameInput = document.getElementById("name");
  const salaryInput = document.getElementById("salary");
  const employee = {
    name: nameInput.value,
    salary: parseFloat(salaryInput.value),
    id: Date.now(),
  };
  employees.push(employee);
  
  nameInput.value = "";
  salaryInput.value = "";
  displayEmployees();
  calculateStats();
}

在代码中，我们首先获取表单、员工列表和统计数据的 DOM 元素。然后我们定义了一个空的员工数组和一个 addEmployee 函数来添加新的员工信息。我们在函数中找到输入框所在的元素，将姓名和工资值存储到一个新的对象 employee 中。我们使用 Date.now() 方法来为新的雇员对象创建唯一 ID，并将整个对象添加到 employees 数组中。最后，我们在添加完员工后清除了输入框的值，然后再调用 displayEmployees() 和 calculateStats() 函数更新网页。

员工列表更新

下一步是实现一个函数 displayEmployees() 来更新员工列表。这个函数遍历 employees 数组，将每个数组元素转换成 HTML 内容，然后将整个列表附加到 tbody 元素（employees）中即可。示例代码如下：

function displayEmployees() {
  const html = employees
    .map(
      (employee) => `
        <tr>
          <td>${employee.name}</td>
          <td>$${employee.salary}</td>
          <td><button onclick=deleteEmployee(${employee.id})">删除</button></td>
        </tr>
      `
    )
    .join("");
  employeeList[xss_clean] = html;
}

在函数中，我们使用 Array.map() 方法将每个员工信息转换成 HTML 单元格。然后我们使用字符串拼接工具将每个员工的单元格连接成一个字符串。最后，我们将整个字符串作为 HTML 内容添加到 tbody 元素中，并更新这个元素的 innerHTML 属性。

统计数据更新

我们创建另一个函数来处理薪资统计数据。该函数计算出员工的数量、总工资、平均工资和最高工资，并更新 HTML 元素以显示结果。示例代码如下：

function calculateStats() {
  const count = employees.length;
  const total = employees.reduce((acc, employee) => acc + employee.salary, 0);
  const highest = employees.reduce(
    (acc, employee) => (acc.salary > employee.salary ? acc.salary : employee.salary),
    0
  );
  const average = total / count || 0;
  employeeCount.textContent = count;
  totalSalary.textContent = `$${total.toFixed(2)}`;
  averageSalary.textContent = `$${average.toFixed(2)}`;
  highestSalary.textContent = `$${highest.toFixed(2)}`;
}

在代码中，我们使用 .length 属性获取员工数量。我们使用 .reduce() 方法来加起每个员工的工资，以计算出总工资。我们使用 .reduce() 方法找到最高的工资值。最后，我们将每个数值使用 .toFixed() 方法来格式化，并且更新每个 HTML 字段。

删除员工信息

我们需要一种方法来删除员工信息。我们将创建一个名为 deleteEmployee(id) 的函数，并通过传递一个 ID 标识符来删除员工。示例代码如下：

function deleteEmployee(id) {
  employees = employees.filter((employee) => employee.id !== id);
  displayEmployees();
  calculateStats();
}

在代码中，我们使用 .filter() 方法来返回一个过滤掉特定 ID 的员工数组。我们在删除员工后调用两个函数，以更新 HTML 和工资统计数据。

总结

我们已经完成了整个薪资管理网页的构建工作！在这个网页中，我们实现了一个表单用于输入员工的薪资信息，并分别统计了薪资总额、平均工资和最高工资。我们还展示了一个员工列表，可以添加和删除员工信息。

下面是完整的 HTML、CSS 和 JavaScript 代码：

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>薪资管理系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form id="employee-form">
            <h2>输入员工薪资信息</h2>
            <div>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" placeholder="请输入姓名">
            </div>
            <div>
            <label for="salary">工资:</label>
            <input type="number" id="salary" name="salary" placeholder="请输入工资">
            </div>
            <div>
            <button type="submit">添加员工</button>
            </div>
        </form>
        <div id="employee-list">
            <h2>员工薪资信息列表</h2>
            <table>
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>工资</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody id="employees">
                
                </tbody>
            </table>
        </div>
        <div id="employee-calculations">
            <h2>薪资统计</h2>
            <div>
                <label>员工总数:</label>
                <span id="employee-count">0</span>
            </div>
            <div>
                <label>薪资总额:</label>
                <span id="total-salary">0</span>
            </div>
            <div>
                <label>平均工资:</label>
                <span id="average-salary">0</span>
            </div>
            <div>
                <label>最高工资:</label>
                <span id="highest-salary">0</span>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS 代码

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: #f1f1f1;
    font-family: Arial, Helvetica, sans-serif;
}
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

如何使用 JavaScript 创建薪资管理网页？

介绍