Heim > Web-Frontend > js-Tutorial > Hauptteil

Der von JavaScript implementierte Warenkorbeffekt kann an vielen Stellen verwendet werden_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:49:01
Original
1152 Leute haben es durchsucht

Der durch JavaScript implementierte Warenkorbeffekt kann natürlich an vielen Stellen eingesetzt werden, z. B. bei der Freundesauswahl, im Personalverwaltungsmodul, bei der Gehaltsberechnung, bei der Personalauswahl usw. Unten sehen Sie eine Darstellung, die einem Einkaufswagen ähnelt:
Der von JavaScript implementierte Warenkorbeffekt kann an vielen Stellen verwendet werden_Javascript-Fähigkeiten
Code:

goodsCar.js: Dieses js ist als separate Datei geschrieben. Steuert hauptsächlich die obige Listenanzeige.

Code kopieren Der Code lautet wie folgt:

window.onload=function(){
initStore ();
var waren=["Schinken", "Königliche Schwester", "Tagesausflug zum Mars"]; ==== ============= Denken Sie klar darüber nach, warum Sie einen temporären Speicherbereich definieren müssen =============
var temps=[] ;//Temporärer Speicher
//Warehouse initialisieren, Inhalt auswählen und hinzufügen
function initStore(){
var select_store=document.getElementById("select_store");
for(var x=0;x< ;goods.length;x )
{
//Optionsobjekt erstellen
var optionNode=document.createElement("option");
optionNode.innerHTML=goods[x];
select_store .appendChild(optionNode);
}
}
//--------------- --------------
function selectGoods(){
//Holen Sie sich das Auswahllistenobjekt des Stores
var out_store=document.getElementById("select_store");
//Holen Sie sich das ausgewählte Listenobjekt meiner Waren
var in_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
}
function deleteGoods(){
//1. Erfassen Sie die zu verschiebenden Produkte
var in_store=document.getElementById("select_store");
var out_store=document.getElementById("select_my"); out_store);
}
/*
* Waren bewegen:
1.inSotre: Waren ins Lager bewegen
2.outStore: Waren aus dem Lager bewegen
*/
//Move
function moveGoods(inStore,outStore){
/ /================Array-Cache leeren========= =========
temps=[];
// Schleife zum Abrufen aller Listenelemente im Store
for(var x=0;x{
var option=outStore.options[x];
// Füge die ausgewählten Listenelemente zum temporären Array zur Speicherung hinzu
if(option.selected){
temps.push (Option);//Fügen Sie Daten zum temporären Array hinzu, um Duplikate zu vermeiden.
}
}
//2 Das ausgewählte Element in der Speicherliste löschen
//3. Das ausgewählte Produkt zum Warenkorb hinzufügen
for(var x=0;x< temps.length; Add
inStore.appendChild(temps[x]);
}
}


Das Folgende ist die Hauptdatei




Code kopieren

Der Code lautet wie folgt:





Insert title here



des Mehrfachattributs des ausgewählten Objekts: Legen Sie einen booleschen Wert fest oder rufen Sie ihn ab, der angibt, ob mehrere Elemente in der Liste ausgewählt werden können -->select id="select_store" multiple="multiple"> value=">>" onclick="selectGoods();"/>
/>








Bitte wählen Sie das Produkt aus, das Sie kaufen möchten:

="checkbox">Großer, hübscher Kerl 20 Yuan
-->
value="Alle auswählen" onclick="mySelect('1');"/>
;

Zahlung " onclick="payMoney();"/>




Verwandte Etiketten:
Quelle:php.cn
Vorheriger Artikel:Einführung in verschiedene Definitionsmethoden und allgemeine Funktionen von Arrays in JavaScript_Grundkenntnisse Nächster Artikel:Erklärung der js-Prototypattribute und allgemeine Methoden_Grundkenntnisse
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage