recherche

Maison >interface Web >js tutoriel >Calcul facile de la remise : explication des taxes, des frais et du pourcentage de remise

Calcul facile de la remise : explication des taxes, des frais et du pourcentage de remise

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2025-01-16 13:12:58973parcourir

Easy Discount Calculation: Tax, Fees & Discount Percentage Explained

Calculateur de remise construit avec HTML, CSS et JavaScript

Cet article présentera un calculateur de remise construit en utilisant HTML, CSS et JavaScript. Nous décomposerons le code pièce par pièce, en expliquant le fonctionnement de chaque partie. De plus, des instructions seront fournies sur la façon de tester la calculatrice vous-même, ainsi que des suggestions d'amélioration du code.

[Testez le code ici](Testez le code)

Fonction calculatrice

Cette calculatrice est conçue pour aider les utilisateurs à calculer le prix final d'un article après application des remises, des taxes et des éventuels frais supplémentaires. Il accepte les saisies du prix d'origine, de la quantité, du pourcentage de remise, du pourcentage de taxe et des frais supplémentaires. Il calcule ensuite le coût total en fonction de ces entrées.

Structure HTML

Voici la structure de base du code HTML : 

<code class="language-html"><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级折扣计算器</title>
    <link rel="stylesheet" href="style.css"> </head>
<body class="discount-body">
    <h1>高级折扣计算器</h1>
    <div class="container discount-container">
        </div>
    <div id="discount-result"></div>
    <script src="script.js"></script>
</body>
</html></code>

Instructions :

  1. Balises DOCTYPE et HTML  : La déclaration <!DOCTYPE html> définit le type de document, en l'occurrence HTML5. La balise <html> contient tout le contenu HTML.
  2. Section principale : à l'intérieur de la balise <head>, nous avons des balises méta pour définir le jeu de caractères et la fenêtre d'affichage pour un design réactif. La balise <title> définit le titre de la page affichée dans l'onglet du navigateur.
  3. Section Corps : Le corps de la page contient le contenu réel avec lequel l'utilisateur va interagir. Ici, nous utilisons la balise <h1> comme titre principal et <div> comme conteneur contenant les éléments du formulaire.

Style CSS

Parlons maintenant du CSS pour styliser la calculatrice : 

<code class="language-css">body.discount-body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f3f4f6;
    color: #333;
    box-sizing: border-box;
}</code>

Segmentation :

  • body.discount-body : Nous appliquons des styles courants au corps, tels que définir la famille de polices sur Arial, ajouter un remplissage autour du contenu et définir une couleur d'arrière-plan claire. box-sizing: border-box;Assurez-vous que le remplissage et les bordures sont inclus dans la largeur et la hauteur totales de l'élément. 
<code class="language-css">h1.discount-heading {
    text-align: center;
    color: #28a745;
    margin-bottom: 15px;
    font-size: 24px;
}</code>
  • h1.discount-heading : Le titre est centré, la couleur est verte (#28a745), il y a une marge en bas et la taille de la police est de 24px. 
<code class="language-css">.container.discount-container {
    max-width: 500px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid #28a745;
}</code>
  • .container.discount-container : Cette section stylise le conteneur dans lequel se trouvent toutes les entrées et boutons du formulaire. Il a une largeur maximale de 500 px, est centré horizontalement à l'aide de margin: 0 auto; et possède une bordure verte. box-shadowCréez une ombre subtile autour du récipient pour lui donner de la profondeur.

Fonction JavaScript

La fonctionnalité principale de la calculatrice est gérée par JavaScript. Voici la fonction calculateDiscount : 

<code class="language-javascript">function calculateDiscount() {
    // ... (代码与原文相同) ...
}</code>

Segmentation :

  1. Sélection d'éléments : Nous utilisons document.getElementById() pour récupérer la valeur de l'entrée du formulaire.
  2. Validation : Nous vérifions si la valeur saisie est un nombre valide. Si une valeur n'est pas valide, nous affichons une alerte à l'utilisateur.
  3. Calcul : Le prix total est calculé en multipliant le prix initial par la quantité. Nous appliquons ensuite la réduction, calculons les taxes et ajoutons les frais supplémentaires éventuels.
  4. Afficher les résultats : Les résultats sont affichés dans le div avec l'identifiant discount-result. Nous utilisons .innerHTML pour mettre à jour dynamiquement le contenu et .style.display = 'block' pour afficher les résultats.

Suggestions d'amélioration

Le code fonctionne bien, mais il y a toujours place à l'amélioration. Voici quelques suggestions :

  1. Validation des nombres non négatifs : garantit que les utilisateurs ne peuvent pas saisir de nombres négatifs pour le prix, la quantité ou les frais.
  2. Taxes facultatives : les champs de taxes et de suppléments peuvent être rendus facultatifs en définissant des valeurs par défaut ou en ajoutant une gestion des entrées plus complexe.
  3. Commentaires des utilisateurs : En cas de saisie invalide, pensez à afficher le message sur la page elle-même, ce qui sera moins intrusif.

Partagez vos réflexions

Selon vous, quelles autres améliorations pourraient être apportées à ce code ? Veuillez laisser vos suggestions dans les commentaires ci-dessous et améliorons cette calculatrice ensemble !

[Testez le code ici](Testez le code)

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!

JavaScript html5 css html auto innerHTML display margin border
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Du défi à la création : créer un générateur d'articles de blog avec AWS et ReactArticle suivant：Du défi à la création : créer un générateur d'articles de blog avec AWS et React

Articles Liés

Voir plus