Home  >  Article  >  Web Front-end  >  The shopping cart effect implemented by JavaScript can be used in many places_javascript skills

The shopping cart effect implemented by JavaScript can be used in many places_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:49:011102browse

The shopping cart effect implemented by JavaScript can of course be used in many places, such as friend selection, human resources module, salary calculation, personnel selection, etc. Below is a rendering of something similar to a shopping cart:
The shopping cart effect implemented by JavaScript can be used in many places_javascript skills
code:

goodsCar.js: This js is written as a separate file. Mainly controls the list display above.

Copy code The code is as follows:

window.onload=function(){
initStore ();
};
var goods=["ham","beauty","royal sister","day trip to Mars","sports car"];
//===== ============= Think clearly about why you need to define a temporary storage area =============
var temps=[];//Temporary storage
//Initialize warehouse select and add content
function initStore(){
var select_store=document.getElementById("select_store");
for(var x=0;x{
//Create option object
var optionNode=document.createElement("option");
optionNode.innerHTML=goods[x];
select_store.appendChild(optionNode);
}
}
//---------------------------------------------
function selectGoods(){
//Get the select list object of the store
var out_store=document.getElementById("select_store");
//Get the select list object of my goods
var in_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
}
function deleteGoods(){
//1. Record the products to be moved
var in_store=document.getElementById("select_store");
var out_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
}
/*
* Move Goods:
1.inSotre: Move goods into the warehouse
2.outStore: Move goods out of the warehouse
*/
//Move
function moveGoods(inStore,outStore){
/ /================Clear the array cache==================
temps=[];
// Loop to get all list items in the store
for(var x=0;x{
var option=outStore.options[x];
// Add the selected list items to the temporary array for storage
if(option.selected){
temps.push(option);//Add data to the temporary array. In order to avoid duplication, the array cache must be cleared
}
}
//2. Delete the selected item in the store list
//3. Add the selected product to the shopping cart
for(var x=0;x< temps.length; Add
inStore.appendChild(temps[x]);
}
}


The following is the main file;



Copy code
The code is as follows:





Insert title here
























Please select the product you want to purchase: