Wie erstelle ich eine Webseite zur Gehaltsabrechnungsverwaltung mit JavaScript?-CSS-Tutorial-php.cn

Wie erstelle ich eine Webseite zur Gehaltsabrechnungsverwaltung mit JavaScript?

PHPz

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

nach vorne

1368 Leute haben es durchsucht

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

Heutzutage entstehen auf der Welt viele Unternehmen und Kleinunternehmen. In diesen Branchen oder Unternehmen arbeiten viele Menschen. Die Verwaltung der Zahlungsunterlagen der Mitarbeiter ist für Arbeitgeber zu einer wichtigen Aufgabe geworden.

Daher benötigt jedes große oder kleine Unternehmen ein ordnungsgemäßes Lohn- und Gehaltsabrechnungssystem. In großen Unternehmen ist es für Arbeitgeber nahezu unmöglich, die Lohn- und Gehaltsabrechnungen für jeden Mitarbeiter manuell zu verwalten. Daher benötigen sie ein digitales Lohn- und Gehaltsabrechnungssystem. In diesem Artikel besprechen wir, wie Sie mit HTML, CSS und JavaScript eine Webseite zur Gehaltsabrechnungsverwaltung erstellen.

Lassen Sie uns zunächst das Gehaltsverwaltungssystem verstehen.

Gehaltsverwaltungssystem

Ein Lohn- und Gehaltsabrechnungssystem ist eine Software, die es Unternehmen ermöglicht, die Finanzberichte ihrer Mitarbeiter geordnet und automatisiert zu verwalten. Es wird verwendet, um die Löhne, Prämien, Gesundheitsleistungen, Transportkostenzuschüsse, Abzüge usw. der Mitarbeiter zu verwalten. Diese Software oder Websites erleichtern die mühsame Verwaltung großer Datenmengen und erleichtern so die Lohn- und Gehaltsabrechnung.

Schritte, die Sie befolgen müssen

Erstellen Sie einen Div-Container mit drei Eingabeelementen, die Informationen über den Namen des Mitarbeiters, das Tagesgehalt und die Anzahl der geleisteten Arbeitstage enthalten.
Gestalten Sie sie nach Ihren Wünschen.
Erstellen Sie eine Schaltfläche, die beim Klicken die Funktion Gehalt anzeigen ausführt. Um dies zu erreichen, verwenden Sie das Attribut onclick().
Verwenden Sie JavaScript, um Variablen zum Speichern von Eingabedaten zu erstellen. Erstellen Sie eine Funktion show_salary, um den Namen und das Grundgehalt des Mitarbeiters anzuzeigen.
Das angezeigte Grundgehalt ist das Produkt aus dem Tageslohn und der Anzahl der geleisteten Arbeitstage.
Verwenden Sie die Methode .innerHTML, um die Ausgabe innerhalb eines p-Elements anzuzeigen.

Anwendungsmethode

Hier verwenden wir die folgenden zwei Methoden -

tofixed()-Methode – Diese Methode wird verwendet, um eine Zahl in eine Zeichenfolge mit einer angegebenen Anzahl von Dezimalstellen umzuwandeln. Die Anzahl der Nachkommastellen wird in Klammern angegeben.

Wenn die Zahl mehr Dezimalstellen enthält, werden standardmäßig Nullen hinzugefügt. Im Folgenden finden Sie die Syntax der tofixed()-Methode:

variable.tofixed();

Nach dem Login kopieren

parseFloat()-Methode – Die parseFloat()-Funktion wird verwendet, um ein String-Argument zu analysieren und eine Gleitkommazahl zurückzugeben. Im Folgenden finden Sie die Syntax der toFloat()-Methode –

parseFloat(string);

Nach dem Login kopieren

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Das folgende Beispiel zeigt, wie man ein einfaches Lohn- und Gehaltsabrechnungsprogramm erstellt. Sie müssen die erforderlichen Eingaben machen und das Grundgehalt wird zusammen mit dem Namen des Mitarbeiters angezeigt.

<!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>

Nach dem Login kopieren

Fazit

In diesem Artikel haben Sie erfahren, wie Sie mit HTML, CSS und JavaScript eine einfache Webseite zur Gehaltsabrechnungsverwaltung entwerfen. Die Lohn- und Gehaltsabrechnung ist eine mühsame Aufgabe, die eine geeignete App oder Website erfordert. Diese Seite ist nur ein kleiner Teil der Website. Auf der Website gibt es verschiedene Funktionen wie monatliche Abzüge, jährliche Boni, die finanzielle Vergangenheit des Mitarbeiters usw. Diese Funktionen werden mithilfe verschiedener Frameworks wie JSON, PHP, MySQL, Bootstrap usw. hinzugefügt

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Webseite zur Gehaltsabrechnungsverwaltung mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!