Einfache Rabattberechnung: Steuern, Gebühren und Rabattprozentsatz erklärt-js-Tutorial-php.cn

Einfache Rabattberechnung: Steuern, Gebühren und Rabattprozentsatz erklärt

Mary-Kate Olsen

Freigeben： 2025-01-16 13:12:58

Original

973 Leute haben es durchsucht

Easy Discount Calculation: Tax, Fees & Discount Percentage Explained

Rabattrechner erstellt mit HTML, CSS und JavaScript

In diesem Artikel geht es um einen Rabattrechner, der mit HTML, CSS und JavaScript erstellt wurde. Wir werden den Code Stück für Stück aufschlüsseln und erklären, wie jeder Teil funktioniert. Darüber hinaus werden Anleitungen gegeben, wie Sie den Rechner selbst testen können, und es werden einige Vorschläge für Code-Verbesserungen gegeben.

[Testen Sie den Code hier](Testen Sie den Code)

Rechnerfunktion

Dieser Rechner soll Benutzern dabei helfen, den Endpreis eines Artikels nach Abzug von Rabatten, Steuern und etwaigen zusätzlichen Gebühren zu berechnen. Es akzeptiert die Eingabe von Originalpreis, Menge, Rabattprozentsatz, Steuersatz und Zusatzkosten. Basierend auf diesen Eingaben werden dann die Gesamtkosten berechnet.

HTML-Struktur

Das Folgende ist die Grundstruktur des HTML-Codes:

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

Nach dem Login kopieren

Anleitung:

DOCTYPE- und HTML-Tags : Die <!DOCTYPE html>-Deklaration definiert den Dokumenttyp, in diesem Fall HTML5. Das <html>-Tag enthält den gesamten HTML-Inhalt.
Kopfabschnitt: Innerhalb des <head>-Tags haben wir Meta-Tags, um den Zeichensatz und den Ansichtsbereich für responsives Design festzulegen. Das <title>-Tag definiert den Seitentitel, der im Browser-Tab angezeigt wird.
Hauptteil: Der Hauptteil der Seite enthält den eigentlichen Inhalt, mit dem der Benutzer interagieren wird. Hier verwenden wir das <h1>-Tag als Haupttitel und <div> als Container, der die Formularelemente enthält.

CSS-Stil

Lassen Sie uns nun das CSS für die Gestaltung des Taschenrechners besprechen:

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

Nach dem Login kopieren

Segmentierung:

body.discount-body: Wir wenden gängige Stile auf den Textkörper an, z. B. die Einstellung der Schriftfamilie auf Arial, das Hinzufügen von Abständen um den Inhalt und die Festlegung einer hellen Hintergrundfarbe. box-sizing: border-box;Stellen Sie sicher, dass Polsterung und Ränder in der Gesamtbreite und -höhe des Elements enthalten sind.

<code class="language-css">h1.discount-heading {
    text-align: center;
    color: #28a745;
    margin-bottom: 15px;
    font-size: 24px;
}</code>

Nach dem Login kopieren

h1.discount-heading: Der Titel ist zentriert, die Farbe ist grün (#28a745), es gibt unten einen Rand und die Schriftgröße beträgt 24 Pixel.

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

Nach dem Login kopieren

.container.discount-container: Dieser Abschnitt gestaltet den Container, in dem sich alle Formulareingaben und Schaltflächen befinden. Es hat eine maximale Breite von 500 Pixel, wird mit margin: 0 auto; horizontal zentriert und hat einen grünen Rand. box-shadowErzeugen Sie einen subtilen Schatten um den Behälter, um ihm Tiefe zu verleihen.

JavaScript-Funktion

Die Hauptfunktionalität des Rechners wird von JavaScript übernommen. Das Folgende ist die calculateDiscount-Funktion:

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

Nach dem Login kopieren

Segmentierung:

Elementauswahl: Wir verwenden document.getElementById(), um den Wert aus der Formulareingabe abzurufen.
Validierung: Wir prüfen, ob der Eingabewert eine gültige Zahl ist. Wenn ein Wert ungültig ist, zeigen wir dem Benutzer eine Warnung an.
Berechnung: Der Gesamtpreis wird durch Multiplikation des Originalpreises mit der Menge berechnet. Anschließend wenden wir den Rabatt an, berechnen die Steuern und addieren etwaige zusätzliche Gebühren.
Ergebnisse anzeigen: Die Ergebnisse werden im Div mit der ID discount-result angezeigt. Wir verwenden .innerHTML, um Inhalte dynamisch zu aktualisieren, und .style.display = 'block', um Ergebnisse anzuzeigen.

Verbesserungsvorschläge

Der Code funktioniert gut, aber es gibt immer Raum für Verbesserungen. Hier sind einige Vorschläge:

Nicht-negative Zahlenvalidierung: Stellt sicher, dass Benutzer keine negativen Zahlen für Preis, Menge oder Gebühr eingeben können.
Optionale Steuern: Steuer- und Zuschlagsfelder können optional gemacht werden, indem Standardwerte festgelegt oder eine komplexere Eingabeverarbeitung hinzugefügt werden.
Benutzer-Feedback: Bei ungültigen Eingaben sollten Sie erwägen, die Meldung auf der Seite selbst anzuzeigen, was weniger aufdringlich ist.

Teilen Sie Ihre Gedanken

Welche weiteren Verbesserungen könnten Ihrer Meinung nach an diesem Code vorgenommen werden? Bitte hinterlassen Sie Ihre Vorschläge in den Kommentaren unten und lassen Sie uns diesen Rechner gemeinsam verbessern!

[Testen Sie den Code hier](Testen Sie den Code)

Das obige ist der detaillierte Inhalt vonEinfache Rabattberechnung: Steuern, Gebühren und Rabattprozentsatz erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!