Maison >interface Web >tutoriel CSS >Comment créer une page web de gestion de paie en utilisant JavaScript ?
Comment créer une page web de gestion de paie en utilisant JavaScript ?
- PHPzavant
- 2023-09-08 17:41:021331parcourir
Aujourd'hui, de nombreuses entreprises et petites entreprises surgissent dans le monde. De nombreuses personnes travaillent dans ces industries ou entreprises. La gestion des dossiers de paiement des employés est devenue une tâche importante pour les employeurs.
Par conséquent, chaque grande ou petite entreprise a besoin d’un système de gestion de la paie approprié. Il est presque impossible pour les employeurs de tenir manuellement les registres de paie de chaque employé dans les grandes entreprises. Ils ont donc besoin d’un système numérique de gestion de la paie. Dans cet article, nous verrons comment créer une page Web de gestion de la paie en utilisant HTML, CSS et JavaScript.
Tout d'abord, comprenons le système de gestion de la paie.
Système de gestion des salaires
Un système de gestion de la paie est un logiciel qui permet aux entreprises de gérer les états financiers de leurs salariés de manière ordonnée et automatisée. Il est utilisé pour gérer les salaires des employés, les primes, les prestations de santé, les indemnités de transport, les déductions, etc. Ces logiciels ou sites Internet simplifient la tâche fastidieuse de gestion de grandes quantités de données, facilitant ainsi le traitement de la paie.
Étapes à suivre
Créez un conteneur div contenant trois éléments d'entrée contenant des informations sur le nom de l'employé, son salaire quotidien et le nombre de jours travaillés.
Concevez-les selon vos préférences.
Créez un bouton qui, une fois cliqué, exécutera la fonction show_salary. Pour y parvenir, utilisez l'attribut onclick().
Utilisez JavaScript pour créer des variables permettant de stocker les données d'entrée. Créez une fonction show_salary pour afficher le nom et le salaire de base de l'employé.
Le salaire de base affiché est le produit du salaire journalier et du nombre de jours travaillés.
Utilisez la méthode .innerHTML pour afficher la sortie à l'intérieur d'un élément p.
Méthode à utiliser
Ici, nous utilisons les deux méthodes suivantes -
Méthode tofixed() - Cette méthode est utilisée pour convertir un nombre en chaîne avec un nombre spécifié de décimales. Le nombre de décimales est indiqué entre parenthèses.
S'il y a plus de décimales dans le nombre, des zéros sont ajoutés par défaut. Voici la syntaxe de la méthode tofixed() -
variable.tofixed();
Méthode parseFloat() - La fonction parseFloat() est utilisée pour analyser un argument de chaîne et renvoyer un nombre à virgule flottante. Voici la syntaxe de la méthode toFloat() –
parseFloat(string);La traduction chinoise de
Exemple
est :Exemple
L'exemple suivant montre comment créer un programme de paie simple. Vous devez fournir les informations requises et le salaire de base ainsi que le nom de l'employé seront affichés.
<!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>
Conclusion
Dans cet article, vous avez appris à concevoir une page Web simple de gestion de la paie en utilisant HTML, CSS et JavaScript. La gestion de la paie est une tâche fastidieuse qui nécessite une application ou un site Web approprié. Cette page n'est qu'une petite partie du site Web. Il existe diverses fonctionnalités sur le site Web telles que les déductions mensuelles, les primes annuelles, l'historique financier de l'employé, etc. Ces fonctionnalités sont ajoutées à l'aide de divers frameworks comme JSON, php, mySQL, Bootstrap, etc.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!