Home Web Front-end JS Tutorial 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

May 16, 2016 pm 04:49 PM
Friends List shopping cart

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:












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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to implement a simple shopping cart function in Java? How to implement a simple shopping cart function in Java? Nov 02, 2023 am 11:56 AM

How to implement a simple shopping cart function in Java? The shopping cart is an important feature of an online store, which allows users to add items they want to purchase to the shopping cart and manage the items. In Java, we can implement a simple shopping cart function by using object-oriented approach. First, we need to define a product category. This class contains attributes such as product name, price, and quantity, as well as corresponding Getter and Setter methods. For example: publicclassProduct

PHP implements shopping cart function PHP implements shopping cart function Jun 22, 2023 am 09:00 AM

In our daily lives, online shopping has become a very common way of consumption, and the shopping cart function is also one of the important components of online shopping. So, this article will introduce how to use PHP language to implement shopping cart related functions. 1. Technical background The shopping cart is a common function on online shopping websites. When users browse some products on a website, they can add those items to a virtual shopping cart for easy selection and management during the subsequent checkout process. A shopping cart usually includes the following basic functions: Add items:

Practical tutorial: Detailed explanation of shopping cart function with PHP and MySQL Practical tutorial: Detailed explanation of shopping cart function with PHP and MySQL Mar 15, 2024 pm 12:27 PM

Practical tutorial: Detailed explanation of the shopping cart function with PHP and MySQL. The shopping cart function is one of the common functions in website development. Through the shopping cart, users can easily add the goods they want to buy to the shopping cart, and then proceed with settlement and payment. In this article, we will detail how to implement a simple shopping cart function using PHP and MySQL and provide specific code examples. To create a database and data table, you first need to create a data table in the MySQL database to store product information. The following is a simple data table

How to implement shopping cart function using Redis and JavaScript How to implement shopping cart function using Redis and JavaScript Sep 21, 2023 pm 01:27 PM

How to use Redis and JavaScript to implement the shopping cart function. The shopping cart is one of the very common functions in e-commerce websites. It allows users to add items of interest to the shopping cart, making it convenient for users to view and manage purchased items at any time. In this article, we will introduce how to implement the shopping cart function using Redis and JavaScript, and provide specific code examples. 1. Preparation Before starting, we need to ensure that Redis has been installed and configured, which can be done through the official website [https:/

How to implement a simple shopping cart function using PHP How to implement a simple shopping cart function using PHP Sep 24, 2023 am 09:13 AM

How to use PHP to implement a simple shopping cart function The shopping cart function is an essential part of an e-commerce website. It allows users to add items of interest to the shopping cart, and then proceed to checkout or continue browsing and adding items. This article will introduce how to use PHP to implement a simple shopping cart function and provide specific code examples. Creating the database and tables First, we need to create a database and a table to store the shopping cart data. CREATEDATABASEshopping_ca

How to design the shopping cart table structure of the mall in MySQL? How to design the shopping cart table structure of the mall in MySQL? Oct 30, 2023 pm 02:12 PM

How to design the shopping cart table structure of the mall in MySQL? With the rapid development of e-commerce, shopping carts have become an important part of online malls. The shopping cart is used to save the products purchased by users and related information, providing users with a convenient and fast shopping experience. Designing a reasonable shopping cart table structure in MySQL can help developers store and manage shopping cart data effectively. This article will introduce how to design the shopping cart table structure of the mall in MySQL and provide some specific code examples. First, the shopping cart table should contain

PHP mall development skills: Design shopping cart and order synchronization functions PHP mall development skills: Design shopping cart and order synchronization functions Jul 30, 2023 pm 07:22 PM

PHP mall development skills: Design shopping cart and order synchronization functions In a mall website, shopping cart and orders are indispensable functions. The shopping cart is used for users to purchase products and save them to a temporary shopping cart, while the order is a record generated after the user confirms the purchase of the product. In order to improve user experience and reduce errors, it is very important to design a shopping cart and order synchronization function. 1. The Concept of Shopping Cart and Order A shopping cart is usually a temporary container used to store items purchased by users. Users can add products to the shopping cart for easy browsing and management.

How to implement the Java switch grocery shopping system with shopping cart quantity reminder function How to implement the Java switch grocery shopping system with shopping cart quantity reminder function Nov 04, 2023 am 09:03 AM

How to realize the Java switch grocery shopping system with the shopping cart quantity reminder function. With the rapid development of the Internet, e-commerce is becoming more and more popular. More and more people are beginning to shop through mobile phones or computer web pages, enjoying a convenient and efficient shopping experience. In the shopping process, the shopping cart is an indispensable tool. It facilitates users to put their favorite products into a temporary "shopping basket" and then proceed to settlement when the order is confirmed. However, during online shopping, sometimes users forget that there are already several items in the shopping cart. So when designing a shopping cart

See all articles