JavaScript 如何创建薪资管理网页

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、phpMySQL、Bootstrap等。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

CSS 教程