首頁 > 文章 > web前端 > 如何使用 JavaScript 建立薪資管理網頁？

如何使用 JavaScript 建立薪資管理網頁？

PHPz轉載: 2023-09-08 17:41:021310瀏覽

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

如今，世界上湧現許多公司和小型企業。在這些行業或公司中有很多人在工作。對雇主來說，管理員工的支付記錄已成為一項重要任務。

因此，每個大型或小型公司都需要適當的薪資管理系統。雇主幾乎不可能在大公司中手動維護每個員工的薪資記錄。因此，他們需要數位薪資管理系統。在本文中，我們將討論如何使用HTML、CSS和JavaScript建立一個薪資管理網頁。

首先讓我們來了解一下薪資管理系統。

薪資管理系統

薪資管理系統是一種軟體，使公司能夠以有序和自動化的方式管理員工的財務報表。它用於管理員工的薪水、獎金、健康福利、交通津貼、扣除等。這些軟體或網站簡化了管理大量資料的繁瑣工作，使薪資處理更加容易。

應遵循的步驟

建立一個包含三個輸入元素的div容器，這些輸入元素包含有關員工姓名、每日薪資和工作天數的資訊。
根據您的喜好設計它們。
建立一個按鈕，按一下該按鈕將執行 show_salary 功能。若要實現此目的，請使用 onclick() 屬性。
使用 JavaScript 建立用於儲存輸入資料的變數。建立一個函數show_salary來顯示員工的姓名和基本薪資。
顯示的基本工資是每日工資和工作天數的乘積。
使用 .innerHTML 方法在 p 元素內顯示輸出。

使用的方法

在這裡我們使用以下兩種方法 -

tofixed() 方法 - 此方法用於將數字轉換為具有指定小數位數的字串。小數位數在括號內指定。

如果數字中的小數位數較多，則預設加零。以下是 tofixed() 方法的語法 -

variable.tofixed();

parseFloat() 方法 - parseFloat() 函數用於解析字串參數，然後傳回浮點數。以下是 toFloat() 方法的語法 –

parseFloat(string);

Example

的中文翻譯為：

範例

以下範例示範如何建立簡單的薪資程式。您需要提供所需的輸入，基本工資以及員工姓名將顯示。

<!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 等各種框架添加的，

以上是如何使用 JavaScript 建立薪資管理網頁？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript mysql json css bootstrap html 字符串 innerHTML 自动化

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS 標記偏移屬性的用法下一篇：CSS 標記偏移屬性的用法

看更多