Der von JavaScript erzielte Einkaufswagen -Effekt kann natürlich an vielen Orten verwendet werden, wie z. B. die Wahl von Freunden, Personalmodulen, Gehaltsberechnung, Personalauswahl usw.
Code:
Goodscar.js: Dieser JS wird als separate Datei geschrieben. Steuert hauptsächlich die Anzeige der obigen Liste.
Die Codekopie lautet wie folgt:
window.onload = function () {
initStore ();
};
var Waren = ["Schinken", "Schönheit", "Mutter Lady", "Day Tour of Mars", "Sportwagen"];
// ============================ Warum müssen Sie einen temporären Speicherbereich definieren und klar denken =========================================================ieben
var temps = []; // vorübergehende Speicherung
// Initialisieren Sie das Repository -Inhalt auswählen
function initstore () {
var select_store = document.getElementById ("select_store");
für (var x = 0; x <goods.length; x ++)
{
// Erstellen Sie ein Optionsobjekt
var optionnode = document.createelement ("option");
optionNode.innerhtml = Waren [x];
select_store.appendchild (OptionNode);
}
}
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Funktion SelectGoods () {
// Holen Sie sich das Listenobjekt des Speichers aus dem Speicher aus
var out_store = document.getElementById ("select_store");
// Holen Sie sich das Objekt meines Produkts aus auswählen
var in_store = document.getElementById ("select_my");
MoveGoods (IN_Store, out_Store);
}
Funktion deletegoods () {
// 1. Notieren Sie das zu verschobene Produkt
var in_store = document.getElementById ("select_store");
var out_store = document.getElementById ("select_my");
MoveGoods (IN_Store, out_Store);
}
/*
* Mobile Produkte:
1.Inotre: Bewegen Sie die Ware in das Lagerhaus
2.outstore: Entfernen Sie das Produkt aus dem Lagerhaus
*/
//bewegen
Funktion MoveGoods (Instore, Outstore) {
// ================================================================== ======================================================================
Temperaturen = [];
// Schleife, um alle Listenelemente im Geschäft zu erhalten
für (var x = 0; x <outstore.options.length; x ++)
{
var option = outstore.options [x];
// Fügen Sie das ausgewählte Listenelement zum Speichern des temporären Arrays hinzu
if (option.selected) {
temps.push (Option); // Daten im temporären Array hinzufügen. Um eine Duplikation zu vermeiden, muss der Array -Cache gelöscht werden
}
}
// 2. Löschen Sie ausgewählte Elemente in der Ladenliste
// 3. Fügen Sie ausgewählte Produkte in den Einkaufswagen hinzu
für (var x = 0; x <temps.length; x ++)
{
// Jeder Knoten hat nur einen übergeordneten Knoten
// Zuerst löschen und dann hinzufügen
outstore.removechild (Temperaturen [x]);
//Hinzufügen zu
Instore.AppendChild (Temps [x]);
}
}
Das Folgende ist die Hauptdatei;
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> Titel hier einfügen </title>
<style type = "text/css">
Tisch{
Grenze: 10px;
}
wählen{
Breite: 200px;
Höhe: 400px;
}
#order_area {
Anzeige: Keine;
}
</style>
<script type = "text/javaScript" src = "goodscar.js"> </script>
<script type = "text/javaScript">
var selectedGoods = []; // zwischengespeicherte Fläche
// Bestellungen basierend auf den Produkten im Einkaufswagen erstellen
Funktion createorder () {
// Bestellbereich anzeigen
var orderAreadiv = document.getElementById ("order_area");
/* Es gibt einen Mitgliedsobjektstil unter dem Div -Objekt. Durch dieses Stilobjekt kann der Stil des DIV kontrolliert werden.
Anzeige: Gibt an, ob dieses Objekt oder Element, das als DIV bezeichnet wird, im Dokument gerendert wird.
Verfügbare Werte:
Block: Objekt wird als Blockelement gerendert.
Keine: Objekt wird nicht gerendert.
.........
Verwenden Sie in diesem Beispiel einfach die oben genannten zwei Werte und es wird in Ordnung sein. Der obige Inhalt stammt aus dem Dokument
*/
// Verwenden Sie den Attributoperationsstil des Knotenobjekts
orderAreadiv.style.display = "block";
var select_my = document.getElementById ("select_my");
für (var x = 0; x <select_my.options.length; x ++) {
//
var optnode = select_my.options [x];
selectedGoods.push (optnode.innerhtml);
}
// über das Produkt reisen und Bestellungen generieren
für (var x = 0; x <selectedGoods.length; x ++) {
///*Vorlage zum dynamischen Generieren von Daten
// <div> <!-Namensattribut ist leicht zu finden->
// <Eingabe type = "Kontrollkästchen" name = "myorder"> <span> schöner Mann 20 Yuan </span>
// </div>
//*/
var divnode = document.createelement ("div");
orderAreadiv.Appendchild (Divnode);
var InputMyorder = document.createelement ("Eingabe");
inputMyorder.SetAttribute ("Typ", "Kontrollkästchen");
inputMyorder.SetAttribute ("Name", "My Order");
Divnode.AppendChild (InputMyorder);
var spannode = document.createelement ("span");
// generieren zufällig eine zufällige Anzahl von 50 bis 100
var price = math.floor (math.random ()*50+50);
InputMyorder.Value = Preis;
Spannode.innerHtml = SelectedGoods [x]+""+Preis;
Divnode.AppendChild (Spannode);
//InputMyorder.AppendChild(spannode); Fehler, da Span und Eingabe Elemente derselben Ebene sind
// Fügen Sie den zusammengestellten Divnode zur Auftragsliste hinzu
var order_list = document.getElementById ("order_list");
order_list.appendchild (Divnode);
}
}
/*
* Sie können weiterhin auswählen, welche Bestellungen in der regenerierten Bestellung bezahlt werden können, und dann die Zahlung ablegen
Drei Möglichkeiten zur Auswahl: Wählen Sie alle aus: 1, wählen Sie nicht aus: 0, umgekehrte Auswahl: 2; Die eigenen Funktionen von Checkbox können mehrmals ausgewählt werden
*/
Funktion mySelect (arg) {
// GetElementsByName: Holen Sie sich die Sammlung von Objekten basierend auf dem Wert des Namens -Tag -Attributs.
var orders = document.getElementsByName ("myorder");
// Der folgende Satz wurde beim Schreiben des Codeprozesses falsch verwendet
// GetElementsByTagName: Holt die Objektsammlung basierend auf dem angegebenen Elementnamen.
// var orders = document.getElementsByTagName ("myorder");
für (var x = 0; x <ordnungen.length; x ++) {
var order = Bestellungen [x];
if (arg == "1") {
order.Conted = true;
}
else if (arg == "0") {
order.Conted = false;
}
else if (arg == "2") {
order.conted =! order. Checked;
}
}
}
// Checkout und Pay, hier wird verwendet, um die Menge aller Produkte der Dialogversion zu demonstrieren.
Funktion paymoney () {
var orders = document.getElementsByName ("myorder");
// Gesamtpreis
var sum = 0;
für (var x = 0; x <ordnungen.length; x ++) {
var order = Bestellungen [x];
if (order.Checked) {
// Überprüfen Sie, was zu kaufen ist.
sum = sum+number (order.value);
}
}
alarm ("Sie sehen, ob Sie zahlen möchten"+Summe+"Yuan");
}
</script>
</head>
<body>
<tabelle>
<tr>
<td>
<!-Die Bedeutung des Multiple-Attributs des Objekts auswählen: Setzen Sie den booleschen Wert an, der angibt, ob mehrere Elemente in der Liste ausgewählt werden können->
<select id = "select_store" multiple = "multiple">
<Optgroup Label = "Produktliste"> </optgroup>
</select>
</td>
<td>
<input type = "button" value = ">>" onclick = "selectGoods ();"/> <br>
<Eingabe type = "button" value = "<<" onclick = "deletegoods ();"/>
</td>
<td>
<select id = "select_my" multiple = "multiple">
<Optgroup Label = "Mein Einkaufswagen"> </optgroup>
</select>
</td>
<td> <input type = "button" value = "orderate" onclick = "createorder ();"/> </td>
</tr>
</table>
<hr/>
<div id = "order_area">
<h3> Bitte wählen Sie das Produkt aus, das Sie kaufen möchten: </h3>
<div id = "order_list">
<!- <div>
<Eingabe type = "CheckBox"> <span> hübsches Typ 20 Yuan </span>
</div>->
</div>
<Eingabe type = "button" value = "Alle" wählen Sie "onclick =" mySelect ('1'); "/>
<Eingabe type = "button" value = "nicht" onclick = "mySelect ('0');"/>
<Eingabe type = "button" value = "Anti-Select" onclick = "mySelect ('2');"/> <br>
<Eingabe type = "Button" value = "pay" onclick = "paymoney ();"/>
</div>
</body>
</html>