資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 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 等）新增的。
2K+ 次瀏覽
