Implementieren eines Einkaufswagens mit nativem JavaScript

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung des Einkaufswagens zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Wirkung:

Code:

<!DOCTYPE html>
<html>
 <Kopf>
 <meta charset="UTF-8">
 <Titel></Titel>
 <Stil>
 *{
 Rand: 0;
 Polsterung: 0;
 }
 .Kasten{
 Breite: 600px;
 Rand: 10px automatisch;
 Hintergrund: URL (Bild/g.jpg);
 Höhe: 500px;
 }
 td{
 Textausrichtung: zentriert;
 Schriftgröße: 30px;
 Farbe: orange;
 }
 Taste{
 Breite: 150px;
 Rand: 0;
 Rahmenradius: 5px;
 Höhe: 30px;
 Hintergrundfarbe: Dodgerblue;
 }
 
 /*.trl:hover{
 Hintergrund: rosa;
 }*/
 
 </Stil>
 </Kopf>
 <Text>
 <div Klasse="Box">
 <br />
 <button>Alle löschen</button>
 <button>Löschen auswählen</button>
 <br>
 <br>
 <input type="text" value="Bitte geben Sie Schlüsselwörter ein" />
 <input type="button" value="Suchen" />
 
 <br>
 <br>
 <Tabellenbreite='600' Rahmen="1" Zellenabstand="0">
 <tr>
  <th><input type="checkbox" class="qx" />Alles auswählen</th>
  <th>Produkte</th>
  <th>Preis</th>
  <th>Seriennummer</th>
  <th>Herkunft</th>
  <th>Marke</th>
  <th>Betrieb</th>
 </tr>
 <tr Klasse="trl">
  <td><Eingabetyp="Kontrollkästchen" Klasse="dx" /></td>
  <td class="shop">Durian</td>
  <td>20 Yuan</td>
  <td class="ind">1</td>
  <td>Hainan</td>
  <td>Anpai</td>
  <td onclick="del(this)">Löschen</td>
 </tr>
 <tr Klasse="trl">
  <td><Eingabetyp="Kontrollkästchen" Klasse="dx" /></td>
  <td class="shop">Apfel</td>
  <td>20 Yuan</td>
  <td class="ind">2</td>
  <td>Hainan</td>
  <td>Anpai</td>
  <td onclick="del(this)">Löschen</td>
 </tr>
 <tr Klasse="trl">
  <td><Eingabetyp="Kontrollkästchen" Klasse="dx" /></td>
  <td class="shop">Erdbeere</td>
  <td>20 Yuan</td>
  <td class="ind">3</td>
  <td>Hainan</td>
  <td>Anpai</td>
  <td onclick="del(this)">Löschen</td>
 </tr>
 <tr Klasse="trl">
  <td><Eingabetyp="Kontrollkästchen" Klasse="dx" /></td>
  <td class="shop">Banane</td>
  <td>20 Yuan</td>
  <td class="ind">4</td>
  <td>Hainan</td>
  <td>Anpai</td>
  <td onclick="del(this)">Löschen</td>
 </tr>
 </Tabelle>
 </div>
 <Skript>
//Alles auswählen oder keines abwählen var qx=document.getElementsByClassName('qx')[0];
   var dx = document.getElementsByClassName("dx");
   qx.onclick=Funktion(){
    für(var i=0;i<dx.length;i++){
    dx[i].geprüft=qx.geprüft
    }
   }
 //Alle löschen var btn=document.getElementsByTagName("button");
   var tr = document.getElementsByTagName('tr');
   var tbody = document.getElementsByTagName("tbody")[0];
   btn[0].onclick=Funktion(){
    für(var i=1;i<tr.length;i++){
     tbody.removeChild(tr[i]);
     ich--;
    }       
   }
 //Auswählen und löschen var dx=document.getElementsByClassName('dx');
   btn[1].onclick=Funktion(){
   für(var i=0;i<dx.length;i++){
    wenn(dx[i].checked==true){
    tbody.entfernenKind(dx[i].parentNode.parentNode)
    ich--;
    indChange();
    }
   }
   }
 // Löschen Sie das Textfeld, um zu suchen und die Farbe zu ändern. var input = document.getElementsByTagName('input');
  
  Eingabe[0].onfocus=Funktion(){
  dieser.Wert=""
  }
  
  var shop = document.getElementsByClassName('shop');
  
  Eingabe[1].onclick=Funktion(){
   für(var i=0;i<shop.length;i++){
   
   wenn(shop[i].innerHTML==input[0].value){
   für(var j=0;j<shop.length;j++){
   shop[j].parentNode.style.background=""
   }
   shop[i].parentNode.style.background="gelb"
   }
   }
  }
  
// 
//Hover rein und raus bewegen 
  für(var i=1;i<tr.length;i++){
  tr[i].onmouseover=Funktion(){
  dieser.Stil.Hintergrund="rosa"
  }
  tr[i].onmouseout=Funktion(){
  dieser.Stil.Hintergrund=""
  }
  
  }

// Einzelne Zeile löschen (Seriennummer)
// Übergeordnetes Element.removeChild(untergeordnetes Element) tbody delete tr
 Funktion del(t){
  tbody.removeChild(t.parentNode);
  indChange();
 }
 
 
 //Seriennummerfunktion indChange(){
  var ind = document.getElementsByClassName("ind");
  für(var i=0;i<ind.Länge;i++){
  ind[i].innerHTML=i+1;
  }
 }
 
 
 </Skript>
 </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 realisiert die Grundfunktionen des Einkaufswagens
Natives js zur Realisierung der Warenkorbfunktion
Natives JS zur Implementierung des Einkaufswagens
js zum Addieren und Subtrahieren der Anzahl der Artikel im Einkaufswagen
Vue.js implementiert eine einfache Warenkorbfunktion
Vuejs bringt Ihnen Schritt für Schritt bei, einen vollständigen Beispielcode für einen Einkaufswagen zu schreiben
Ideen und Code zur Implementierung von js-Einkaufswagen (finde ich persönlich gut)
Schreiben einer einfachen Warenkorbfunktion in JavaScript
Detaillierter Javascript-Code zur Implementierung der Warenkorbfunktion
js implementiert einen einfachen Einkaufswagen mit Bildern und Codes

<<: JavaScript-HTML zur Implementierung der mobilen Red Envelope Rain-Funktionsseite

>>: JS-Code zum Erzielen eines Seitenwechseleffekts