如何使用 HTML CSS JavaScript 创建薪酬角色管理网页？(1)

📌 相关文章

📜 如何使用 HTML CSS JavaScript 创建薪酬角色管理网页？(1)

📅 最后修改于: 2023-12-03 15:08:18.974000 🧑 作者: Mango

如何使用 HTML CSS JavaScript 创建薪酬角色管理网页？

介绍

本文将介绍如何使用 HTML CSS JavaScript 创建一个薪酬角色管理网页。该网页可以用于管理公司员工的薪酬角色，包括添加、编辑和删除员工的薪酬角色。我们将使用 HTML 用于页面结构，CSS 用于样式布局，JavaScript 用于页面交互和数据处理。

HTML结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>薪酬角色管理</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="app">
        <!-- 在这里添加HTML代码 -->
    </div>
    <script src="script.js"></script>
  </body>
</html>

我们使用 HTML 5 doctype 声明，然后在 <head> 标签中指定字符编码和样式表链接。在 <body> 标签中，我们创建了一个带有 id 为 app 的 div 元素，它将在 JavaScript 中处理。在 app 元素中，我们将添加剩余的 HTML 代码。

CSS样式

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f1f1f1;
}

.container {
  padding: 20px;
  margin: 0 auto;
  max-width: 1000px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 36px;
}

.card {
  background-color: white;
  box-shadow: 0px 0px 10px grey;
  padding: 40px;
  margin-bottom: 20px;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
  border-radius: 5px;
}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

在样式表中，我们定义了整个页面的样式。我们将本页面设为使用 Arial 字体的背景色为 #f1f1f1 的页面，使用max-width:1000px将页面宽度限制在1000像素之内。

我们使用 .container 容器定义了页面内容的最大宽度和间距。我们使用 .card 类定义用于包含薪酬角色信息的卡片。

按钮使用 .button，它具有常见的样式，红色背景和白色字体，以及hover样式的效果。

输入框使用 input[type=text] 和 select，它们具有与常规输入框相同的样式。

最后，我们在样式表中使用了一些其他的 CSS 标记（如 border-radius 和 box-sizing)。

JavaScript

let roleList = [
  { name: '经理', salary: 100000 },
  { name: '职员', salary: 50000 },
  { name: '实习生', salary: 30000 }
]

function render() {
  let html = ''
  for (let i = 0; i < roleList.length; i++) {
    const role = roleList[i]
    html += `
      <div class="card">
        <div>${role.name}</div>
        <div>${role.salary}元/月</div>
        <button onclick="edit(${i})">编辑</button>
        <button onclick="del(${i})">删除</button>
      </div>
    `
  }
  document.querySelector('#app').innerHTML = `
    <h1>薪酬角色列表</h1>
    ${html}
    <button class="button" onclick="add()">添加</button>
  `
}

function add() {
  const name = prompt('请输入薪酬角色名称')
  const salary = parseInt(prompt('请输入薪酬角色薪水'))
  if (name && salary) {
    roleList.push({ name, salary })
    render()
  }
}

function del(index) {
  roleList.splice(index, 1)
  render()
}

function edit(index) {
  const role = roleList[index]
  const name = prompt('请输入薪酬角色名称', role.name)
  const salary = parseInt(prompt('请输入薪酬角色薪水', role.salary))
  if (name && salary) {
    role.name = name
    role.salary = salary
    render()
  }
}

render()

在这段 JavaScript 代码中，我们定义了一个角色列表，其中每个角色都有一个 name 和一个 salary 属性。我们还定义了 render()、add()、del() 和 edit() 函数用于管理角色数据。

在 render() 函数中，我们遍历角色列表，并使用 HTML 创建角色卡片。在卡片中，我们使用 onclick 属性，当单击“编辑”或“删除”按钮时，调用相应的 edit() 或 del() 函数。我们还添加一个“添加”按钮，用于调用 add() 函数以添加新角色。

在 add() 函数中，我们使用 prompt() 函数提示用户输入新角色的名称和薪水。如果用户成功输入了名称和工资，我们用 push() 方法将新角色添加到角色列表中，并调用 render() 函数更新列表。

在 del() 函数中，我们使用 splice() 方法删除指定索引处的角色，并调用 render() 函数更新列表。

在 edit() 函数中，我们首先获取指定索引处的角色。然后，我们使用 prompt() 函数提示用户更新角色的名称和薪水。如果用户成功输入了名称和工资，我们更新相应的角色，然后调用 render() 函数更新列表。

最后，我们在代码的末尾调用 render() 函数，用于显示初始角色数据。

总结

在本文中，我们介绍了如何使用 HTML、CSS 和 JavaScript 创建一个薪酬角色管理网页。我们使用 HTML 创建页面结构，使用 CSS 为页面添加样式，使用 JavaScript 处理页面交互和数据。通过学习本文，您应该能够创建自己的薪酬角色管理网页，以及应用类似的技术来制作其他网页。