The shopping cart effect achieved by JavaScript, of course, this effect can be used in many places, such as the choice of friends, human resources modules, salary calculation, personnel selection, etc. Here is a rendering of a shopping cart similar to:
Code:
goodsCar.js: This js is written as a separate file. Mainly controls the display of the above list.
The code copy is as follows:
window.onload=function(){
initStore();
};
var goods=["ham","beauty","mother lady","day tour of Mars","sports car"];
//============================ Why do you need to define a temporary storage area and think clearly ====================================================================================================================================================================================================================
var temps=[];//Temporary storage
//Initialize the repository select Add content
function initStore(){
var select_store=document.getElementById("select_store");
for(var x=0;x<goods.length;x++)
{
//Create an option object
var optionNode=document.createElement("option");
optionNode.innerHTML=goods[x];
select_store.appendChild(optionNode);
}
}
//-----------------------------------------------------------------------------------------------------------------------------
function selectGoods(){
//Get the store's select list object
var out_store=document.getElementById("select_store");
//Get the select list object of my product
var in_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
}
function deleteGoods(){
//1. Record the product to be moved
var in_store=document.getElementById("select_store");
var out_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
}
/*
* Mobile products:
1.inSotre: Move the goods into the warehouse
2.outStore: Remove the product from the warehouse
*/
//move
function moveGoods(inStore,outStore){
//=============================================================================================================================================================================================================================================================
temps=[];
//Loop to get all list items in the store
for(var x=0;x<outStore.options.length;x++)
{
var option=outStore.options[x];
// Add the selected list item to the temporary array to store
if(option.selected){
temps.push(option);//Add data in the temporary array. To avoid duplication, the array cache must be cleared
}
}
//2. Delete selected items in the store list
//3. Add selected products to the shopping cart
for(var x=0;x<temps.length;x++)
{
//Each node has only one parent node
//Delete first and then add
outStore.removeChild(temps[x]);
//Add to
inStore.appendChild(temps[x]);
}
}
The following is the main file;
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border:10px;
}
select{
width:200px;
height:400px;
}
#order_area{
display:none;
}
</style>
<script type="text/javascript" src="goodsCar.js"></script>
<script type="text/javascript">
var selectedGoods=[];//Cached area
//Create orders based on the products in the shopping cart
function createOrder(){
//Show order area
var orderAreaDiv=document.getElementById("order_area");
/* There is a member object style under the div object. Through this style object, the style of the div can be controlled.
display: indicates whether this object or element called div is rendered in the document.
Available values:
block: Object is rendered as a block element.
none :Object is not rendered.
.........
In this example, just use the above two values and it will be OK. The above content comes from the document
*/
//Use the attribute operation style of node object
orderAreaDiv.style.display="block";
var select_my=document.getElementById("select_my");
for(var x=0;x<select_my.options.length;x++){
//
var optNode=select_my.options[x];
selectedGoods.push(optNode.innerHTML);
}
//Travel over the product and generate orders
for(var x=0;x<selectedGoods.length;x++){
///*Template for dynamically generating data
//<div><!--name attribute is easy to find-->
//<input type="checkbox" name="myorder"><span>Handsome guy 20 yuan</span>
//</div>
//*/
var divNode =document.createElement("div");
orderAreaDiv.appendChild(divNode);
var inputMyOrder=document.createElement("input");
inputMyOrder.setAttribute("type","checkbox");
inputMyOrder.setAttribute("name","myorder");
divNode.appendChild(inputMyOrder);
var spanNode=document.createElement("span");
// Randomly generate a random number of 50 to 100
var price=Math.floor(Math.random()*50+50);
inputMyOrder.value=price;
spanNode.innerHTML=selectedGoods[x]+" "+price;
divNode.appendChild(spanNode);
//inputMyOrder.appendChild(spanNode); error, because span and input are elements of the same level
//Add the assembled divNode to orderlist
var order_list = document.getElementById("order_list");
order_list.appendChild(divNode);
}
}
/*
* You can still choose which orders are ready to be paid in the regenerated order and then make payment
Three ways to choose: select all: 1, do not select: 0, reverse select: 2; checkbox's own functions can be selected multiple times
*/
function mySelect(arg){
//getElementsByName: Get the collection of objects based on the value of the NAME tag attribute.
var orders = document.getElementsByName("myorder");
//The following sentence was used incorrectly during the process of writing code
//getElementsByTagName: Gets the object collection based on the specified element name.
//var orders=document.getElementsByTagName("myorder");
for(var x=0;x<orders.length;x++){
var order=orders[x];
if(arg=="1"){
order.checked=true;
}
else if(arg=="0"){
order.checked=false;
}
else if(arg=="2"){
order.checked=!order.checked;
}
}
}
//Checkout and pay, here is used to demonstrate the amount of all the products popped up by the dialogue version.
function payMoney(){
var orders = document.getElementsByName("myorder");
//Total price
var sum=0;
for(var x=0;x<orders.length;x++){
var order = orders[x];
if(order.checked){
//Check what to buy.
sum=sum+Number(order.value);
}
}
alert("You see if you want to pay "+sum+"yuan");
}
</script>
</head>
<body>
<table>
<tr>
<td>
<!-- The meaning of the multiple attribute of the select object: Set or get the Boolean value indicating whether multiple items can be selected in the list -->
<select id="select_store" multiple="multiple">
<optgroup label="Product List"></optgroup>
</select>
</td>
<td>
<input type="button" value=">>" onclick="selectGoods();"/><br>
<input type="button" value="<<" onclick="deleteGoods();"/>
</td>
<td>
<select id="select_my" multiple="multiple">
<optgroup label="My Shopping Cart"></optgroup>
</select>
</td>
<td><input type="button" value="generate order" onclick="createOrder();"/></td>
</tr>
</table>
<hr/>
<div id="order_area">
<h3>Please select the product you want to purchase:</h3>
<div id="order_list">
<!-- <div>
<input type="checkbox"><span>Handsome guy 20 yuan</span>
</div>-->
</div>
<input type="button" value="Select all" onclick="mySelect('1');"/>
<input type="button" value="not select" onclick="mySelect('0');"/>
<input type="button" value="Anti-select" onclick="mySelect('2');"/><br>
<input type="button" value="pay" onclick="payMoney();"/>
</div>
</body>
</html>