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

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)

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.