如今，世界上涌現出許多公司和小型企業。在這些行業或公司中有很多人在工作。對雇主來說，管理員工的支付記錄已經成為一項重要任務。
因此，每個大型或小型公司都需要適當的工資管理系統。雇主幾乎不可能在大公司中手動維護每個員工的工資記錄。因此，他們需要數字工資管理系統。在本文中，我們將討論如何使用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 創建薪資管理網頁？的詳細內容，更多請關注www.92cms.cn其它相關文章！
