JS implementiert einfache Addition und Subtraktion von Warenkorbeffekten

In diesem Artikelbeispiel wird der spezifische JS-Code zur einfachen Addition und Subtraktion von Einkaufswagen als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Schreiben Sie das Eingabefeld als Ergebnis einer Addition oder Subtraktion.

2. Die Plus- und Minus-Tasten werden mit Button-Buttons umgesetzt

3. Verwenden Sie js, um den Wert von i als Wert im Eingabefeld zu steuern.

Der erzielte Effekt:

Der vollständige Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <Titel></Titel>
  <Stil>
   Körper{
    Rand: 0;
    Polsterung: 0;
   }
   .Kasten{
    Rand: rot, durchgezogen 1px;
    Höhe: 40px;
    Breite: 200px;
    Rand: 200px automatisch;
    Textausrichtung: zentriert;
    Polsterung oben: 20px;
   }
   .box Eingabe{
    Breite: 40px;
    Textausrichtung: zentriert;
   }
   #Geld{
    Rand: keiner;
    Textausrichtung: links;
    Rand links: 2px;
   }
   ul{
    Listenstil: keiner;
   }
   ul li{
    Anzeige: Block;
    schweben: links;
    vertikale Ausrichtung: Mitte;
   }
  </Stil>
  <Skript>
   fenster.onload = funktion(){
    var plus = document.getElementById("plus");
    var i = document.getElementById("text").Wert;
    var subtrahieren = document.getElementById("subtrahieren");
    var Geld = document.getElementById("Geld").Wert;
    plus.onclick = Funktion(){
     ich++;
     document.getElementById("text").Wert = i;
     document.getElementById("Geld").value = i*Geld;
    }
    subtrahieren.beiKlick = Funktion(){
     wenn (i>0) {
      ich--;
      document.getElementById("text").Wert = i;
      document.getElementById("Geld").value = i*Geld;
     } anders{
      ich = 0;
      document.getElementById("text").Wert = i;
      document.getElementById("Geld").value = i*Geld;
     }
    }    
   }  
  </Skript>
 </Kopf>
 <Text>
  <ul Klasse="Box">
   <li><button id="plus">+</button></li>
   <li><Eingabetyp="Text" ID="Text" Wert="1"/></li>
   <li><button id="subtrahieren">-</button></li>
   <li>&nbsp;&nbsp;&nbsp;¥<input type="text" id="money" value="88"/></li>
  </ul>
 </body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

js implementiert das Hinzufügen und Entfernen von Warenkörben sowie die Preisberechnung
js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen
js zum Addieren und Subtrahieren der Anzahl der Artikel im Einkaufswagen
So fügen Sie Produktkomponenten zum vue.js-Einkaufswagen hinzu
Implementierung des „In den Einkaufswagen“-Effekts auf JavaScript-Basis mit Quellcode-Download

<<: MySql Installer 8.0.18 Visuelles Installationstutorial mit Bildern und Text

>>: Verschiedene Probleme und Lösungen beim Bereitstellen von Tomcat zur Veröffentlichung von Projekten unter Linux