Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich eine Webseite zur Gehaltsabrechnungsverwaltung mit JavaScript?
Wie erstelle ich eine Webseite zur Gehaltsabrechnungsverwaltung mit JavaScript?
- PHPznach vorne
- 2023-09-08 17:41:021334Durchsuche
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();
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);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>
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!