Bagaimana untuk membuat halaman web pengurusan gaji menggunakan JavaScript?-tutorial css-php.cn

Bagaimana untuk membuat halaman web pengurusan gaji menggunakan JavaScript?

PHPz

Lepaskan： 2023-09-08 17:41:02

ke hadapan

1318 orang telah melayarinya

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

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();

Salin selepas log masuk

parseFloat() kaedah - Fungsi parseFloat() digunakan untuk menghuraikan parameter rentetan dan kemudian mengembalikan nombor titik terapung. Berikut ialah sintaks kaedah toFloat() –

parseFloat(string);

Salin selepas log masuk

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>

Salin selepas log masuk

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!