How does JavaScript implement the shopping cart?
This article mainly introduces how to achieve JavaScript shopping cart, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
The details are as follows
HTML structure
Document full selection of commodity names unit price quantity subtotal operation
8848 Mobile 4GB+64GB Qianfeng Blue 8888 CNY-+ 8888 CNY deletion
8848 Mobile 4GB+64GB Qianfeng Blue 8888 CNY-+ 8888 CNY deletion
8848 Mobile 4GB+64GB Qianfeng Blue 8888 CNY-+ 8888 CNY deletion
8848 Mobile 4GB+64GB Qianfeng Blue 8888 yuan-+ 8888 yuan Delete to continue shopping has selected 0 items to settle the total: 0 yuan
Css structure
/ * both browsers and tags have default styles to clear default styles * / * {margin: 0 Padding: 0} / * clear the default style of bold tags * / bGraint strong {font-weight: normal} / * clear the default style of slanted tags * / iMagi em {font-style: normal} / * clear the default underline * / a {text-decoration: none} / * the default color of hyperlinks is black * / a {color: # 000 } / * default symbol style of clear list * / ul,ol,li {list-style: none} / * left float * / .umurl {float: left;} / * right float * / .umurr {float: right;} / * clear float * / .clearfix {clear: both;} .cart {margin:0 auto; width: 1200px } / * shopping cart head style * / .cart-head {height: 70px; line-height: 70px;} .col {width: 120px;} .col-img img {width: 100px; height: 100px;} .col-name {width: 380px;} .col-price {width: 160px; padding-right: 18px;} .col-num {width: 150px; text-align: center;}. Col-sum {text-align: center Color: # ff6700;}. Col-active {text-align: center;} / * shopping cart merchandise style * / .item-box {overflow: hidden; padding: 20px 0; border-top: 1px solid # ccc;} .change-goods-num {width: 148px; height: 38px; border: 1px solid # 000;} .change-goods-num a {float: left; width: 38px; height: 38px; line-height: 38px Font-size: 20px; color: # 000; text-align: center;} .change-goods-num input {float: left; width: 72px; height: 38px; font-size: 18px; line-height: 38px; text-align: center; border-width: 0;} / * bottom * / .cart-foot {height: 50px; line-height: 50px; border: 1px solid # ccc }. Section-left a {margin-left: 32px; color: # 757575;}. Section-left span {margin-left: 16px; padding-left: 16px; color: # 757575; border-left: 1px solid # ccc;}. Section-left I {color: # ff6700;} .1px solid {margin-left: 40px; padding:0 40px; font-size: 18px; background-color: orange; color: # fff }. Total-price {color: # ff6700;}. Total-price em {font-size: 30px;}
Js structure
/ / get all the check boxes on the page checkvar check = document.querySelectorAll ('.check'); console.log (check.length); / / get the merchandise bar check box var single = document.querySelectorAll ('.single'); console.log (single.length); / / get each line of merchandise bar var itemBox = document.querySelectorAll ('. Item-box'); console.log (itemBox); for (var item0)
