Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 16:49:01
Original
1151 people have browsed it

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:












source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template