Rumah >hujung hadapan web >tutorial css >Bagaimana untuk membuat halaman web pengurusan gaji menggunakan JavaScript?
Bagaimana untuk membuat halaman web pengurusan gaji menggunakan JavaScript?
- PHPzke hadapan
- 2023-09-08 17:41:021334semak imbas
Hari ini, terdapat banyak syarikat dan perniagaan kecil yang muncul di dunia. Terdapat ramai orang yang bekerja dalam industri atau syarikat ini. Menguruskan rekod pembayaran pekerja telah menjadi tugas penting bagi majikan.
Oleh itu, setiap syarikat besar atau kecil memerlukan sistem pengurusan gaji yang betul. Hampir mustahil bagi majikan untuk mengekalkan rekod gaji secara manual bagi setiap pekerja dalam syarikat besar. Oleh itu, mereka memerlukan sistem pengurusan gaji digital. Dalam artikel ini, kami akan membincangkan cara membuat halaman web pengurusan gaji menggunakan HTML, CSS dan JavaScript.
Pertama marilah kita memahami sistem pengurusan gaji.
Sistem Pengurusan Gaji
Sistem pengurusan gaji ialah perisian yang membolehkan syarikat menguruskan penyata kewangan pekerja mereka dengan teratur dan automatik. Ia digunakan untuk menguruskan gaji pekerja, bonus, faedah kesihatan, elaun pengangkutan, potongan, dll. Perisian atau tapak web ini memudahkan tugas yang membosankan untuk mengurus sejumlah besar data, dengan itu menjadikan pemprosesan gaji lebih mudah.
Langkah untuk diikuti
Buat bekas div yang mengandungi tiga elemen input yang mengandungi maklumat tentang nama pekerja, gaji harian dan bilangan hari bekerja.
Reka bentuk mengikut citarasa anda.
Buat butang yang apabila diklik akan melaksanakan fungsi tunjuk_gaji. Untuk mencapai matlamat ini, gunakan atribut onclick().
Gunakan JavaScript untuk mencipta pembolehubah untuk menyimpan data input. Buat fungsi show_gaji untuk memaparkan nama pekerja dan gaji pokok.
Gaji pokok yang dipaparkan adalah hasil daripada gaji harian dan bilangan hari bekerja.
Gunakan kaedah .innerHTML untuk memaparkan output di dalam elemen p.
Cara menggunakan
Di sini kami menggunakan dua kaedah berikut -
tofixed() kaedah - Kaedah ini digunakan untuk menukar nombor kepada rentetan dengan bilangan tempat perpuluhan yang ditentukan. Bilangan tempat perpuluhan dinyatakan dalam kurungan.
Jika terdapat lebih banyak tempat perpuluhan dalam nombor, sifar ditambah secara lalai. Berikut ialah sintaks kaedah tofixed() -
variable.tofixed();
parseFloat() kaedah - Fungsi parseFloat() digunakan untuk menghuraikan parameter rentetan dan kemudian mengembalikan nombor titik terapung. Berikut ialah sintaks kaedah toFloat() –
parseFloat(string);Terjemahan bahasa Cina bagi
Contoh
ialah:Contoh
Contoh berikut menunjukkan cara membuat program gaji mudah. Anda perlu menyediakan input yang diperlukan dan gaji pokok beserta nama pekerja akan dipaparkan.
<!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>
KESIMPULAN
Dalam artikel ini, anda mempelajari cara mereka bentuk halaman web pengurusan gaji yang mudah menggunakan HTML, CSS dan JavaScript. Pengurusan gaji adalah tugas yang membosankan yang memerlukan aplikasi atau tapak web yang betul. Halaman ini hanyalah sebahagian kecil daripada laman web. Terdapat pelbagai ciri di laman web seperti potongan bulanan, bonus tahunan, sejarah kewangan pekerja, dll. Ciri ini ditambah menggunakan pelbagai rangka kerja seperti JSON, php, mySQL, Bootstrap, dll.
Atas ialah kandungan terperinci Bagaimana untuk membuat halaman web pengurusan gaji menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!