Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve the shopping cart effect of javascript. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article. Javascript to achieve the effect of shopping cart methods: 1, the use of table for interface layout; 2, self-packaging getClasses function; 3, through js to achieve the selection and full selection of goods, as well as the number of goods increase or decrease and other functions.

This article operating environment: windows7 system, javascript1.8.5 version, DELL G3 computer

How does javascript achieve the shopping cart effect?

An example of Shopping cart realized by javascript

An example of a shopping cart based on javascript implementation:

The first is the effects and functions, as shown in the following figure, with the basic functions of a shopping cart.

Including 1, selected and all selected goods; 2, the increase or decrease of the number of commodities; 3, the calculation of the price of a single commodity; 4, the calculation of the total price; 5, the deletion of goods.

I. Interface layout

Table is used for layout, because when you use js to get tr and td nodes, you can get a collection of elements with subscript, which is more convenient to operate.

The code for html+css is as follows:

Shopping cart * {margin:0px; padding:0px;} table,td,td {border:1px solid # 00000; font-size:10px;} table {display: block;} img {float:left;} tr {text-align: center } # box {width:900px;} # cart {float:left; border-collapse:collapse;} # head {background:#F0FFFF;} # settlement {margin-top:20px; width:805px; height:30px Border:1px solid # EBEBEB; float:left; background: # EBEBEB; font-size:10px; line-height:30px;} # settlement div {float:left;} # addupto {color:#ff0000; font-weight:700 } # NumofGoods {color:#ff0000; font-weight:700;} .goods {padding:5px; text-align: left;} .number {position:relative; left:19px; width:60px; height:10px Border:1px solid # cccccc;} .acc {width:40px; height:10px; border-left:0px solid # cccccc; border-right:0px solid # cccccc; line-height: 10px; float:left;} .desymbol {width:10px; height:10px Line-height: 10px; background:#ccc; float:left; cursor:pointer;} .adsymbol {width:10px; height:10px; line-height: 10px; background:#ccc; float:right; cursor:pointer } / * .dele {cursor: pointer;} * / .total {color:#ff0000; font-weight:700;} all selected items unit price quantity subtotal operation

Alien laptop 17R4 15R3 13 inch 17 inch alienware tonight Battle Royale Games Ben 12888.00-1 + deleted

Nintendo (Nintendo) Switch home game console NS intelligent somatosensory game console 2258.00-1 + deleted

Microsoft/ Microsoft Surface Pro i5 8G 256G Notebook tablet two in one 4999.00-1 + deletion

Apple/ Apple 10.5in iPad Pro 3666.00-1 + Delete all selected items ^ Total: settlement of

II. Javascript code

The self-encapsulated getClasses () function avoids compatibility problems.

Var prices = getClasses ("price"), cart = document.getElementById ("cart"); acc = getClasses ("acc"), totals = getClasses ("total"), detracts = getClasses ("desymbol"), adds = getClasses ("adsymbol"), NumofGoods = document.getElementById ("NumofGoods"), addupto = document.getElementById ("addupto"), allSelect = getClasses ("allSelect"), select = getClasses ("select"), dele = getClasses ("dele"); count () CountAll (); for (var item0; I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.