如何使用 JavaScript 创建工资管理网页?

cssweb developmentfront end technology更新于 2025/1/26 1:48:17

如今，全球有许多公司和小型企业蓬勃发展。在这些行业或公司中工作的人数众多。管理员工的工资记录已成为雇主的一项重要任务。

因此，无论大小公司，都需要合适的工资管理系统。在大公司中，雇主几乎不可能手动维护每位员工的工资记录。因此，他们需要数字化的工资管理系统。在本文中，我们将讨论如何使用 HTML、CSS 和 JavaScript 创建工资管理网页。

让我们首先了解一下工资管理系统。

工资管理系统

工资管理系统是一种软件，它使公司能够以分类和自动化的方式管理员工的财务报表。它用于管理员工的工资、奖金、医疗福利、交通费、扣除额等。这些软件或网站减轻了管理大量数据的繁琐工作，从而使工资单处理更加轻松。

步骤

创建一个 div 容器，其中包含三个输入元素，分别包含员工姓名、日薪和工作天数等信息。
根据您的喜好设置样式。
创建一个按钮，点击后将执行 show_salary 功能。为此，请使用 onclick() 属性。
使用 JavaScript 创建用于存储输入数据的变量。创建一个函数 show_salary，用于显示员工姓名和基本工资。
为了显示基本工资，日工资和工作天数的值会相乘。
使用 .innerHTML 方法在 p 元素内显示输出。

使用的方法

在此我们使用以下两种方法 –

tofixed() 方法 − 此方法用于将数字转换为具有指定小数位数的字符串。小数位数在括号内指定。

如果数字的小数位数较高，则默认添加零。 tofixed() 方法的语法如下 –

variable.tofixed();

parseFloat() 方法 − parseFloat() 函数用于解析字符串参数，然后返回浮点数。toFloat() 方法的语法如下 –

parseFloat(string);

示例

以下示例演示如何创建一个简单的工资单程序。您需要提供所需的输入，系统就会显示基本工资以及员工姓名。

<!DOCTYPE html>
<html>
<head>
   <title>Payroll Management Program</title>
   <style>
      h2{
         text-align: center;
         text-decoration: underline;
      }
      body, p {
         font-family: verdana;
         font-size: 16px;
         font-weight: bold;
      }
      .container {
         width: 600px;
         clear: both;
      }
      .container input {
         width: 100%;
         clear: both;
      }
   </style>
   <script>
      function show_salary() {
         var user = document.getElementById("user_name").value;
         var wage = document.getElementById("daily_wage").value;
         var working_days = document.getElementById("no_days_work").value;
         pay= parseFloat(wage) * working_days;
         results1 = "Employee's Name: " + user + ".";
         results2 ="Basic Salary: INR " + pay.toFixed(2) +".";         
         document.getElementById("demo1").innerHTML = results1;
         document.getElementById("demo2").innerHTML = results2;
      }
   </script>
</head>
<body>
   <div class= "container">
      <h2>Payroll Program using JavaScript</h2>
      <br> <br> Employee's Name
      <input type= "text" id= "user_name" name= "user_name" placeholder= "Enter the name of employee">
      <br>
      <br> Daily Wage
      <input type= "text" id= "daily_wage" name= "daily_wage" placeholder= "Enter the daily wages">
      <br>
      <br> Number of Days of Work
      <input type= "text" id= "no_days_work" name= "no_days_work" placeholder= "Enter number of days worked">
      <br>
      <br>
      <button onclick= "show_salary()"> Show Salary </button>
      <br> <br> <br>
      <section id= "demo1"> </section>
      <section id= "demo2"> </section>
   </div>
</body>
</html>

结论

在本文中，您学习了如何使用 HTML、CSS 和 JavaScript 设计一个简单的工资管理网页。工资管理是一项繁琐的任务，需要合适的应用程序或网站。此网页只是网站的一小部分。网站包含各种功能，例如月度扣款、年度奖金、员工财务历史记录等。这些功能是使用 JSON、PHP、MySQL、Bootstrap 等各种框架添加的。