The JavaScript implementation of the shopping cart effect can be used in a number of ways
- 2020-03-30 02:52:13
- OfStack
JavaScript implementation of the shopping cart effect, of course, this effect can be used in many places, such as the selection of friends, human resources module, salary calculation, personnel selection, and so on. Here's an image of what looks like a shopping cart:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405090947071.gif? 20144994741 ">
Code:
GoodsCar. Js: this js is written as a separate file. Basically controls what the list above shows.
Below is the main file;
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405090947071.gif? 20144994741 ">
Code:
GoodsCar. Js: this js is written as a separate file. Basically controls what the list above shows.
window.onload=function(){
initStore();
};
var goods=[" ham "," The beauty "," The royal elder sister "," A day trip to Mars "," The sports car "];
//================== =========
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++)
{
//Creating an option object
var optionNode=document.createElement("option");
optionNode.innerHTML=goods[x];
select_store.appendChild(optionNode);
}
}
//------------------------------------
function selectGoods(){
//Gets the store's select list object
var out_store=document.getElementById("select_store");
//Gets the select list object for my item
var in_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
}
function deleteGoods(){
//1. Keep track of the products to be moved
var in_store=document.getElementById("select_store");
var out_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
}
// mobile
function moveGoods(inStore,outStore){
//================== = empty array cache ================== ====
temps=[];
//The loop gets all the list items in the store
for(var x=0;x<outStore.options.length;x++)
{
var option=outStore.options[x];
//Adds the selected list item to a temporary array for storage
if(option.selected){
temps.push(option);//Add data to temporary array. To avoid duplication, the array cache is cleared
}
}
//2. Delete selected items from 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
//Delete before you add
outStore.removeChild(temps[x]);
// add
inStore.appendChild(temps[x]);
}
}
Below is the main file;
<!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=[];//Cache region
//Generate orders based on the products in the shopping cart
function createOrder(){
//Display order area
var orderAreaDiv=document.getElementById("order_area");
//Manipulate the style with the attributes of the 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);
}
//Iterate over the product to generate the order
for(var x=0;x<selectedGoods.length;x++){
///* templates 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");
//Generate a random number from 50 to 100
var price=Math.floor(Math.random()*50+50);
inputMyOrder.value=price;
spanNode.innerHTML=selectedGoods[x]+" "+price;
divNode.appendChild(spanNode);
//InputMyOrder. The appendChild (spanNode); Error because span and input are siblings
//Add the assembled divNode to the orderlist
var order_list = document.getElementById("order_list");
order_list.appendChild(divNode);
}
}
function mySelect(arg){
//GetElementsByName: gets the collection of objects based on the value of the NAME tag attribute.
var orders = document.getElementsByName("myorder");
//The following sentence was mistakenly used in the process of writing code
//GetElementsByTagName: gets a collection of objects based on the name of the specified element.
//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;
}
}
}
//Pay the bill, which USES the amount of all the items that pop up in the dialog to demonstrate
function payMoney(){
var orders = document.getElementsByName("myorder");
// The total price
var sum=0;
for(var x=0;x<orders.length;x++){
var order = orders[x];
if(order.checked){
//Be sure to buy.
sum=sum+Number(order.value);
}
}
alert(" Please see if you want to pay "+sum+" yuan ");
}
</script>
</head>
<body>
<table>
<tr>
<td>
<!-- select The object's multiple Property that indicates whether more than one item in the list can be selected Boolean value -->
<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=" To generate orders " 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> Big handsome boy 20 yuan </span>
</div>-->
</div>
<input type="button" value=" Future generations " onclick="mySelect('1');"/>
<input type="button" value=" Don't choose " onclick="mySelect('0');"/>
<input type="button" value=" The selected " onclick="mySelect('2');"/><br>
<input type="button" value=" Payment! " onclick="payMoney();"/>
</div>
</body>
</html>