interface Webjs tutorielCalcul facile de la remise : explication des taxes, des frais et du pourcentage de remiseCalcul facile de la remise : explication des taxes, des frais et du pourcentage de remise
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 :
<!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 id="高级折扣计算器">高级折扣计算器</h1>
<div class="container discount-container">
</div>
<div id="discount-result"></div>
<script src="script.js"></script>
</body>
</html>
Instructions :
-
Balises DOCTYPE et HTML : La déclaration
définit le type de document, en l'occurrence HTML5. La balise <code>contient tout le contenu HTML. -
Section principale : à l'intérieur de la balise
, 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></title>définit le titre de la page affichée dans l'onglet du navigateur. -
Section Corps : Le corps de la page contient le contenu réel avec lequel l'utilisateur va interagir. Ici, nous utilisons la balise
<h1></h1>comme titre principal et<div> comme conteneur contenant les éléments du formulaire. <hr> <p><strong>Style CSS</strong></p> <p>Parlons maintenant du CSS pour styliser la calculatrice : </p> <pre class='brush:php;toolbar:false;'>body.discount-body { font-family: 'Arial', sans-serif; margin: 0; padding: 20px; background-color: #f3f4f6; color: #333; box-sizing: border-box; }</pre> <p><strong>Segmentation : </strong></p> <ul> <li> <code>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. -
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. -
.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 demargin: 0 auto;et possède une bordure verte.box-shadowCréez une ombre subtile autour du récipient pour lui donner de la profondeur. -
Sélection d'éléments : Nous utilisons
document.getElementById()pour récupérer la valeur de l'entrée du formulaire. - 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.
- 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.
-
Afficher les résultats : Les résultats sont affichés dans le div avec l'identifiant
discount-result. Nous utilisons.innerHTMLpour mettre à jour dynamiquement le contenu et.style.display = 'block'pour afficher les résultats. - 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.
- 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.
- Commentaires des utilisateurs : En cas de saisie invalide, pensez à afficher le message sur la page elle-même, ce qui sera moins intrusif.
h1.discount-heading {
text-align: center;
color: #28a745;
margin-bottom: 15px;
font-size: 24px;
}
.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;
}
Fonction JavaScript
La fonctionnalité principale de la calculatrice est gérée par JavaScript. Voici la fonction calculateDiscount :
function calculateDiscount() {
// ... (代码与原文相同) ...
}
Segmentation :
Suggestions d'amélioration
Le code fonctionne bien, mais il y a toujours place à l'amélioration. Voici quelques suggestions :
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!
Python vs JavaScript: environnements et outils de développementApr 26, 2025 am 12:09 AMLes choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.
JavaScript est-il écrit en C? Examiner les preuvesApr 25, 2025 am 12:15 AMOui, le noyau du moteur de JavaScript est écrit en C. 1) Le langage C fournit des performances efficaces et un contrôle sous-jacent, qui convient au développement du moteur JavaScript. 2) Prendre le moteur V8 comme exemple, son noyau est écrit en C, combinant l'efficacité et les caractéristiques orientées objet de C. 3) Le principe de travail du moteur JavaScript comprend l'analyse, la compilation et l'exécution, et le langage C joue un rôle clé dans ces processus.
Rôle de JavaScript: rendre le Web interactif et dynamiqueApr 24, 2025 am 12:12 AMJavaScript est au cœur des sites Web modernes car il améliore l'interactivité et la dynamicité des pages Web. 1) Il permet de modifier le contenu sans rafraîchir la page, 2) manipuler les pages Web via Domapi, 3) prendre en charge les effets interactifs complexes tels que l'animation et le glisser-déposer, 4) Optimiser les performances et les meilleures pratiques pour améliorer l'expérience utilisateur.
C et JavaScript: la connexion expliquéeApr 23, 2025 am 12:07 AMC et JavaScript réalisent l'interopérabilité via WebAssembly. 1) Le code C est compilé dans le module WebAssembly et introduit dans un environnement JavaScript pour améliorer la puissance de calcul. 2) Dans le développement de jeux, C gère les moteurs de physique et le rendu graphique, et JavaScript est responsable de la logique du jeu et de l'interface utilisateur.
Des sites Web aux applications: les diverses applications de JavaScriptApr 22, 2025 am 12:02 AMJavaScript est largement utilisé dans les sites Web, les applications mobiles, les applications de bureau et la programmation côté serveur. 1) Dans le développement de sites Web, JavaScript exploite DOM avec HTML et CSS pour réaliser des effets dynamiques et prend en charge des cadres tels que JQuery et React. 2) Grâce à la réactnative et ionique, JavaScript est utilisé pour développer des applications mobiles multiplateformes. 3) Le cadre électronique permet à JavaScript de créer des applications de bureau. 4) Node.js permet à JavaScript d'exécuter le côté du serveur et prend en charge les demandes simultanées élevées.
Python vs JavaScript: cas d'utilisation et applications comparéesApr 21, 2025 am 12:01 AMPython est plus adapté à la science et à l'automatisation des données, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python fonctionne bien dans la science des données et l'apprentissage automatique, en utilisant des bibliothèques telles que Numpy et Pandas pour le traitement et la modélisation des données. 2. Python est concis et efficace dans l'automatisation et les scripts. 3. JavaScript est indispensable dans le développement frontal et est utilisé pour créer des pages Web dynamiques et des applications à une seule page. 4. JavaScript joue un rôle dans le développement back-end via Node.js et prend en charge le développement complet de la pile.
Le rôle de C / C dans les interprètes et compilateurs JavaScriptApr 20, 2025 am 12:01 AMC et C jouent un rôle essentiel dans le moteur JavaScript, principalement utilisé pour implémenter des interprètes et des compilateurs JIT. 1) C est utilisé pour analyser le code source JavaScript et générer une arborescence de syntaxe abstraite. 2) C est responsable de la génération et de l'exécution de bytecode. 3) C met en œuvre le compilateur JIT, optimise et compile le code de point chaud à l'exécution et améliore considérablement l'efficacité d'exécution de JavaScript.
JavaScript en action: Exemples et projets du monde réelApr 19, 2025 am 12:13 AML'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel
Version Mac de WebStorm
Outils de développement JavaScript utiles
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
Version crackée d'EditPlus en chinois
Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code
MinGW - GNU minimaliste pour Windows
Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.
