JavaScript实现购物车案例
作者:HAI6545
这篇文章主要为大家详细介绍了JavaScript实现购物车案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现购物车功能的具体代码,供大家参考,具体内容如下
HTML结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/02-reset.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <!-- 简单写个大盒子分大三栏 --> <div class="cart"> <!-- 购物车头部 --> <div class="cart-head clearfix"> <div class="col col-check u-l"> <input type="checkbox" id="all" class="check"> <label for="all">全选</label> </div> <div class="col col-img u-l"> </div> <div class="col col-name u-l">商品名称</div> <div class="col col-price u-l">单价</div> <div class="col col-num u-l">数量</div> <div class="col col-sum u-l">小计</div> <div class="col col-action u-r">操作</div> </div> <!-- 购物车列表 --> <div class="cart-list"> <!-- 商品块 --> <div class="list-item"> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text" value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">删除</div> </div> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text " value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">删除</div> </div> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text" value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">删除</div> </div> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text" value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">删除</div> </div> </div> </div> <!-- 购物车底部 --> <div class="cart-foot"> <div class="section-left u-l"> <a href="">继续购物</a> <span>已选择 <i id="totalNum">0</i> 件商品</span> </div> <div class="u-r settlement">去结算</div> <div class="u-r total-price">合计: <em id="totalPrice">0</em>元</div> </div> </div> <script type="text/javascript" src="./js/script.js"></script> </body> </html>
css结构
/* 浏览器和标签都有默认的样式 清除默认样式 */ *{ margin: 0;padding: 0 } /* 清除加粗标签的默认样式 */ b,strong{ font-weight: normal } /* 清除倾斜标签的默认样式 */ i,em{ font-style: normal } /* 清除默认下划线 */ a,u{ text-decoration: none } /* 超链接默认颜色为黑色 */ a{ color: #000; } /* 清除列表的默认符号样式 */ ul,ol,li{ list-style: none } /* 左浮动 */ .u-l{ float: left; } /* 右浮动 */ .u-r{ float: right; } /* 清除浮动 */ .clearfix{ clear: both; }
.cart{ margin:0 auto; width: 1200px; } /* 购物车头部样式 */ .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; } /* 购物车商品样式 */ .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; } /* 底部 */ .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; } .settlement{ 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结构
//获取到页面中所有复选框check var check = document.querySelectorAll('.check'); console.log(check.length); //获取到商品栏复选框 var single = document.querySelectorAll('.single'); console.log(single.length); //获取每一行商品栏 var itemBox = document.querySelectorAll('.item-box'); console.log(itemBox); for(var i=0;i<check.length;i++){ //给所有复选框添加事件 check[i].onclick = function(e){ //判断是否全选 var count = 0; //判断全选框 if(e.target.getAttribute('id') == 'all'){ //把全选状态赋值给每一个checkbox for(j=0;j<single.length;j++){ single[j].checked = this.checked } } for(var k = 0; k<single.length;k++){ if(single[k].checked){ count++; } if( count == single.length){ check[0].checked = true; }else{ check[0].checked = false; } } fTotal(); } } //给商品每一行添加事件 for(var i = 0;i<itemBox.length;i++){ itemBox[i].onclick = function(e){ var input = this.getElementsByTagName('input')[1]; switch(e.target.className){ case 'jiahao': // alert('加'); input.value = parseInt(input.value)+1; fTotalSum(this); break; case 'jianhao': // alert('减'); input.value = parseInt(input.value)-1 <=1 ? 1:parseInt(input.value)-1; fTotalSum(this); break; case 'col col-action u-r': var con = confirm('确定删除吗?'); if( con ){ this.parentNode.removeChild(this); } break; } //调用 计算总数量和总价 fTotal() } } // 定义一个函数计算 小计 That === this 就是商品每一行 function fTotalSum(That){ //获取当前行的数量 var num = That.getElementsByTagName('input')[1].value; //获取当前行的单价 取整是为了省略掉'元'字符串,方便计算 var price = parseInt(That.querySelector('.col-price').innerHTML); // 最终小计值为数量乘以单价 That.querySelector('.col-sum').innerHTML = num * price+'元'; }; //定义一个函数 方便调用总数量 和 合计 function fTotal(){ //获取到总价节点 var totalPrice = document.getElementById('totalPrice'); //总价 var price = 0; //获取到总件节点 var totalNum = document.getElementById('totalNum'); //数量总和 var Num = 0; //获取每一行商品盒子 var itemBox = document.querySelectorAll('.item-box'); for(var i = 0; i<itemBox.length;i++){ itemBox[i].getElementsByTagName('input')[1].value; //选中了,才拿数量和价格 if( itemBox[i].getElementsByTagName('input')[0].checked ){ Num += parseInt(itemBox[i].getElementsByTagName('input')[1].value); price += parseInt(itemBox[i].querySelector('.col-sum').innerHTML); } } //合并把总和数量写到标签里 totalNum.innerHTML = Num; totalPrice.innerHTML = price; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。