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

如今，世界上涌现出许多公司和小型企业。在这些行业或公司中，有很多人在工作。对雇主来说，管理员工的支付记录已经成为一项关键任务。

因此，每个大型或小型公司都需要一个合适的工资单管理系统。对于大公司来说，手动维护每个员工的工资单记录几乎是不可能的。因此，他们需要数字化的工资单管理系统。在本文中，我们将讨论如何使用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等各种框架添加的。