<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/car_demo.css"/> </head> <body> <div class="main"> <ul class="title"> <li> <input id="checkAll" type="checkbox" /> <span>全选</span> </li> <li>商品</li> <li>单价</li> <li>数量</li> <li>小计</li> <li>操作</li> </ul> <ul class="list"> <li data-id="11"> <div class="list_item check"> <input class="checkone" type="checkbox" /> </div> <div class="list_item goods"> <div class="pickture"><img src="images/111.png"/></div> <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div> </div> <div class="list_item price">¥<span class="priceone">1000.00</span></div> <div class="list_item number"> <input class="reduce" type="button" value="-" /> <input class="numbox" type="text" value="1" /> <input class="plus" type="button" value="+" /> </div> <div class="list_item subtotal"></div> <div class="list_item delete">删除</div> </li> <li data-id="22"> <div class="list_item check"> <input class="checkone" type="checkbox" /> </div> <div class="list_item goods"> <div class="pickture"><img src="images/222.png"/></div> <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div> </div> <div class="list_item price">¥<span class="priceone">2000.00</span></div> <div class="list_item number"> <input class="reduce" type="button" value="-" /> <input class="numbox" type="text" value="1" /> <input class="plus" type="button" value="+" /> </div> <div class="list_item subtotal"></div> <div class="list_item delete">删除</div> </li> <li data-id="33"> <div class="list_item check"> <input class="checkone" type="checkbox" /> </div> <div class="list_item goods"> <div class="pickture"><img src="images/333.png"/></div> <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div> </div> <div class="list_item price">¥<span class="priceone">3000.00</span></div> <div class="list_item number"> <input class="reduce" type="button" value="-" /> <input class="numbox" type="text" value="1" /> <input class="plus" type="button" value="+" /> </div> <div class="list_item subtotal"></div> <div class="list_item delete">删除</div> </li> <li data-id="44"> <div class="list_item check"> <input class="checkone" type="checkbox" /> </div> <div class="list_item goods"> <div class="pickture"><img src="images/444.png"/></div> <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div> </div> <div class="list_item price">¥<span class="priceone">4000.00</span></div> <div class="list_item number"> <input class="reduce" type="button" value="-" /> <input class="numbox" type="text" value="1" /> <input class="plus" type="button" value="+" /> </div> <div class="list_item subtotal"></div> <div class="list_item delete">删除</div> </li> <li data-id="55"> <div class="list_item check"> <input class="checkone" type="checkbox" /> </div> <div class="list_item goods"> <div class="pickture"><img src="images/555.png"/></div> <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div> </div> <div class="list_item price">¥<span class="priceone">5000.00</span></div> <div class="list_item number"> <input class="reduce" type="button" value="-" /> <input class="numbox" type="text" value="2" /> <input class="plus" type="button" value="+" /> </div> <div class="list_item subtotal"></div> <div class="list_item delete">删除</div> </li> </ul> <ul class="foot"> <li id="removes">删除</li> <li> 已选商品<span id="checknum">0</span>件 合计:¥<span id="allPrice">0</span> </li> <li id="payfor">结算</li> </ul> </div> </body> </html>
*{font-family: Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\u5FAE\u8F6F\u96C5\u9ED1", "WenQuanYi Micro Hei", sans-serif;} body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } /******* *******\ * * * * * O * * O * * * * * \****** ******/ .main{width:1000px;margin:100px auto;} .title{zoom:1;border-top: 1px solid #FF5500;background-color: #fafafa;} .title:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; } .title li{float:left;height:50px;line-height:50px;text-align:center;font-size: 16px;} .title li:nth-child(1){width:100px;} .title li:nth-child(2){width:350px;} .title li:nth-child(3){width:130px;} .title li:nth-child(4){width:160px;} .title li:nth-child(5){width:130px;} .title li:nth-child(6){width:130px;} .list{zoom:1;} .list li:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; } .list li{height:120px;text-align: center;} .list_item{height:120px;float: left;} .check,.price,.subtotal,.delete,.number{line-height: 120px;text-align: center;} .check{width:100px;} .goods{width:350px;} .price{width:130px;} .number{width:160px;} .subtotal{width:130px;} .delete{width:130px;} .list li:nth-child(even) {background: #fafafa;} .goods{position: relative;} .pickture{ width:100px; height:100px; margin:10px; position: absolute; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } input[type='checkbox']{cursor: pointer;} .pickture img{width:100%;} .name{ margin:40px auto auto 120px; height:40px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 22px; text-align: left; cursor: pointer; } .name:hover{color:#FF5500;} .price{color: #FF5500;} .number input{height:20px;display: inline-block;vertical-align: middle;} .number input[type='button']{ width:20px; margin:auto 5px; cursor: pointer; background-color: #ffffff; border: 1px solid #e3e3e3; } .number input[type='text']{width:60px;text-align: center;} .delete{cursor: pointer;} .delete:hover{color: #FF5500;} .foot{zoom:1;border-top: 1px solid #FF5500;background-color: #fafafa;} .foot:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; } .foot li{float:left;height:50px;line-height:50px;text-align:center;font-size: 16px;} .foot li:nth-child(1){width:100px;cursor: pointer;} .foot li:nth-child(2){width:770px;text-align: right;} .foot li:nth-child(3){width:130px;cursor: pointer;} .foot span{color: #FF5500;font-size: 20px;} #removes:hover{color: #FF5500;} #payfor:hover{color: #FF5500;}
window.onload=function(){ var listArr = document.querySelector('.list'); //列表 var oLi = listArr.getElementsByTagName('li'); //获取行 var checkAll = document.getElementById('checkAll'); //全选 var checkOne = document.querySelectorAll('.checkone'); //单选 var priceOne = document.querySelectorAll('.priceone'); //单价 var goodsNum = document.querySelectorAll('.numbox'); //单个商品数量 var reduceBtn = document.querySelectorAll('.reduce'); //数量减 var plusBtn = document.querySelectorAll('.plus'); //数量加 var subtotalPrice = document.querySelectorAll('.subtotal'); //小计 var deleteBtn = document.querySelectorAll('.delete'); //单个删除 var removesBtn = document.getElementById('removes'); //多个删除 var checkNum = document.getElementById('checknum'); //件数 var allPrice = document.getElementById('allPrice'); //总价 total_price(); var num; var price_all = 0; var idArry = []; //小计 function total_price(){ for(var i=0;i<priceOne.length;i++){ var oneNum = priceOne[i].parentNode.parentNode.getElementsByClassName('numbox')[0].value; var onePrice = priceOne[i].parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML; var oneTotal = priceOne[i].parentNode.parentNode.getElementsByClassName('subtotal'); oneTotal[0].innerHTML = parseInt(oneNum)*parseFloat(onePrice); } } //数量减 for(var i=0;i<reduceBtn.length;i++){ reduceBtn[i].onclick = function(){ num = parseInt(this.parentNode.parentNode.getElementsByClassName('numbox')[0].value); if(num<=1){ this.disabled = true; return false; } num --; this.parentNode.parentNode.getElementsByClassName('numbox')[0].value = num; total_price(); if(this.parentNode.parentNode.getElementsByClassName('checkone')[0].checked){ allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML); } } } //数量加 for (var i=0;i<plusBtn.length;i++) { plusBtn[i].onclick = function(){ num = parseInt(this.parentNode.parentNode.getElementsByClassName('numbox')[0].value); num ++; if(num>1){ this.parentNode.parentNode.getElementsByClassName('reduce')[0].disabled = false; } this.parentNode.parentNode.getElementsByClassName('numbox')[0].value = num; total_price(); if(this.parentNode.parentNode.getElementsByClassName('checkone')[0].checked){ allPrice.innerHTML = parseFloat(allPrice.innerHTML)+parseFloat(this.parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML); } } } //总价 function priceAll(){ for(var i=0;i<checkOne.length;i++){ if(checkOne[i].checked){ price_all += parseFloat(checkOne[i].parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML); allPrice.innerHTML = price_all; }else{price_all = 0;} } return price_all; } //删除数组元素 function remove(arr,val) { for(var i=0; i<arr.length; i++) { if(arr[i] == val) { arr.splice(i, 1); break; } } return arr; }; //单选 for (var i=0;i<checkOne.length;i++) { checkOne[i].index = i; checkOne[i].onclick = function(e){ var count = 0; var dataId = this.parentNode.parentNode.getAttribute('data-id'); if(this.checked){ allPrice.innerHTML = parseFloat(allPrice.innerHTML)+parseFloat(this.parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML); checkNum.innerHTML = parseInt(checkNum.innerHTML)+1; idArry.push(dataId); }else{ allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML); checkNum.innerHTML = parseInt(checkNum.innerHTML)-1; idArry = remove(idArry,dataId); } console.log(idArry) for (var j = 0; j < checkOne.length; j++) { if(checkOne[j].checked==true){ count++; } else{count-1} } if(count == oLi.length){checkAll.checked = true;} if(!this.checked){ checkAll.checked = false; price_all = 0; } } } setTimeout(function() { //延时自动触发全选事件 // IE if(document.all) { checkAll.click(); } // 其它浏览器 else { var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); checkAll.dispatchEvent(e); } }, 100); //全选 checkAll.onclick = function(){ for(var i=0;i<checkOne.length;i++){ checkOne[i].checked=this.checked; } if(this.checked){ priceAll(); checkNum.innerHTML = checkOne.length; for (var i = 0; i < oLi.length; i++) { idArry.push(oLi[i].getAttribute('data-id')) } } else{ priceAll(); allPrice.innerHTML = 0; price_all = 0; checkNum.innerHTML = 0; idArry = []; } console.log(idArry) } //单删 for(var i=0;i<deleteBtn.length;i++){ deleteBtn[i].onclick = function(){ var delets = confirm('确定删除所选商品吗?'); //弹出确认框 if (delets) { listArr.removeChild(this.parentNode); if(this.parentNode.getElementsByClassName('checkone')[0].checked){ allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.getElementsByClassName('subtotal')[0].innerHTML); checkNum.innerHTML = parseInt(checkNum.innerHTML)-1; if(oLi.length==0){ checkAll.checked = false; } } } } } //多删 removesBtn.onclick = function(){ if (checkNum.innerHTML != 0) { var delets = confirm('确定删除所选商品吗?'); //弹出确认框 if (delets) { for (var i = 0; i < oLi.length; i++) { if (oLi[i].querySelectorAll('.checkone')[0].checked) { oLi[i].parentNode.removeChild(oLi[i]); // 删除相应节点 i--; //回退下标位置 } } allPrice.innerHTML = 0; checkNum.innerHTML = 0; checkAll.checked = false; } } else { alert('请选择商品!'); } } //数目框输入事件 for(var i=0;i<goodsNum.length;i++){ goodsNum[i].onkeyup = function(){ var val = parseInt(this.value); if (isNaN(val) || val <= 0) { val = 1; } if (this.value != val) { this.value = val; } total_price(); priceAll() } } }
效果图:
之前做过JQ的购物车,一直想写一个纯js的购物车,所以就抽空码了一个,多有不足,阅览后请指教
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><link rel="stylesheet" type="text/css" href="css/car_demo.css"/></head><body><div class="main"><ul class="title"><li><input id="checkAll" type="checkbox" /><span>全选</span></li><li>商品</li><li>单价</li><li>数量</li><li>小计</li><li>操作</li></ul><ul class="list"><li data-id="11"><div class="list_item check"><input class="checkone" type="checkbox" /></div><div class="list_item goods"><div class="pickture"><img src="images/111.png"/></div><div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div></div><div class="list_item price">¥<span class="priceone">1000.00</span></div><div class="list_item number"><input class="reduce" type="button" value="-" /><input class="numbox" type="text" value="1" /><input class="plus" type="button" value="+" /></div><div class="list_item subtotal"></div><div class="list_item delete">删除</div></li><li data-id="22"><div class="list_item check"><input class="checkone" type="checkbox" /></div><div class="list_item goods"><div class="pickture"><img src="images/222.png"/></div><div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div></div><div class="list_item price">¥<span class="priceone">2000.00</span></div><div class="list_item number"><input class="reduce" type="button" value="-" /><input class="numbox" type="text" value="1" /><input class="plus" type="button" value="+" /></div><div class="list_item subtotal"></div><div class="list_item delete">删除</div></li><li data-id="33"><div class="list_item check"><input class="checkone" type="checkbox" /></div><div class="list_item goods"><div class="pickture"><img src="images/333.png"/></div><div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div></div><div class="list_item price">¥<span class="priceone">3000.00</span></div><div class="list_item number"><input class="reduce" type="button" value="-" /><input class="numbox" type="text" value="1" /><input class="plus" type="button" value="+" /></div><div class="list_item subtotal"></div><div class="list_item delete">删除</div></li><li data-id="44"><div class="list_item check"><input class="checkone" type="checkbox" /></div><div class="list_item goods"><div class="pickture"><img src="images/444.png"/></div><div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div></div><div class="list_item price">¥<span class="priceone">4000.00</span></div><div class="list_item number"><input class="reduce" type="button" value="-" /><input class="numbox" type="text" value="1" /><input class="plus" type="button" value="+" /></div><div class="list_item subtotal"></div><div class="list_item delete">删除</div></li><li data-id="55"><div class="list_item check"><input class="checkone" type="checkbox" /></div><div class="list_item goods"><div class="pickture"><img src="images/555.png"/></div><div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div></div><div class="list_item price">¥<span class="priceone">5000.00</span></div><div class="list_item number"><input class="reduce" type="button" value="-" /><input class="numbox" type="text" value="2" /><input class="plus" type="button" value="+" /></div><div class="list_item subtotal"></div><div class="list_item delete">删除</div></li></ul><ul class="foot"><li id="removes">删除</li><li>已选商品<span id="checknum">0</span>件 合计:¥<span id="allPrice">0</span></li><li id="payfor">结算</li></ul></div><script type="text/javascript">window.onload=function(){var listArr = document.querySelector('.list'); //列表var oLi = listArr.getElementsByTagName('li'); //获取行var checkAll = document.getElementById('checkAll'); //全选var checkOne = document.querySelectorAll('.checkone'); //单选var priceOne = document.querySelectorAll('.priceone'); //单价var goodsNum = document.querySelectorAll('.numbox'); //单个商品数量var reduceBtn = document.querySelectorAll('.reduce'); //数量减var plusBtn = document.querySelectorAll('.plus'); //数量加var subtotalPrice = document.querySelectorAll('.subtotal'); //小计var deleteBtn = document.querySelectorAll('.delete'); //单个删除var removesBtn = document.getElementById('removes'); //多个删除var checkNum = document.getElementById('checknum'); //件数var allPrice = document.getElementById('allPrice'); //总价total_price();var num;var price_all = 0;var idArry = [];//小计function total_price(){for(var i=0;i<priceOne.length;i++){ var oneNum = priceOne[i].parentNode.parentNode.getElementsByClassName('numbox')[0].value;var onePrice = priceOne[i].parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML;var oneTotal = priceOne[i].parentNode.parentNode.getElementsByClassName('subtotal');oneTotal[0].innerHTML = parseInt(oneNum)*parseFloat(onePrice);}}//数量减for(var i=0;i<reduceBtn.length;i++){reduceBtn[i].onclick = function(){num = parseInt(this.parentNode.parentNode.getElementsByClassName('numbox')[0].value);if(num<=1){this.disabled = true;return false;}num --;this.parentNode.parentNode.getElementsByClassName('numbox')[0].value = num;total_price();if(this.parentNode.parentNode.getElementsByClassName('checkone')[0].checked){allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML);}}}//数量加for (var i=0;i<plusBtn.length;i++) {plusBtn[i].onclick = function(){num = parseInt(this.parentNode.parentNode.getElementsByClassName('numbox')[0].value);num ++;if(num>1){this.parentNode.parentNode.getElementsByClassName('reduce')[0].disabled = false;}this.parentNode.parentNode.getElementsByClassName('numbox')[0].value = num;total_price();if(this.parentNode.parentNode.getElementsByClassName('checkone')[0].checked){allPrice.innerHTML = parseFloat(allPrice.innerHTML)+parseFloat(this.parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML);}}}//总价function priceAll(){for(var i=0;i<checkOne.length;i++){if(checkOne[i].checked){price_all += parseFloat(checkOne[i].parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML);allPrice.innerHTML = price_all;}else{price_all = 0;}}return price_all;}//删除数组元素function remove(arr,val) { for(var i=0; i<arr.length; i++) { if(arr[i] == val) { arr.splice(i, 1); break; }} return arr; };//单选for (var i=0;i<checkOne.length;i++) {checkOne[i].index = i;checkOne[i].onclick = function(e){var count = 0;var dataId = this.parentNode.parentNode.getAttribute('data-id');if(this.checked){allPrice.innerHTML = parseFloat(allPrice.innerHTML)+parseFloat(this.parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML);checkNum.innerHTML = parseInt(checkNum.innerHTML)+1;idArry.push(dataId);}else{allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML);checkNum.innerHTML = parseInt(checkNum.innerHTML)-1;idArry = remove(idArry,dataId);}console.log(idArry)for (var j = 0; j < checkOne.length; j++) { if(checkOne[j].checked==true){ count++; } else{count-1} } if(count == oLi.length){checkAll.checked = true;}if(!this.checked){checkAll.checked = false;price_all = 0;}}}setTimeout(function() { //延时自动触发全选事件 // IE if(document.all) { checkAll.click(); } // 其它浏览器 else { var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); checkAll.dispatchEvent(e); }}, 100);//全选checkAll.onclick = function(){for(var i=0;i<checkOne.length;i++){ checkOne[i].checked=this.checked; } if(this.checked){ priceAll(); checkNum.innerHTML = checkOne.length; for (var i = 0; i < oLi.length; i++) { idArry.push(oLi[i].getAttribute('data-id')) } } else{ priceAll(); allPrice.innerHTML = 0; price_all = 0; checkNum.innerHTML = 0; idArry = []; } console.log(idArry)}//单删for(var i=0;i<deleteBtn.length;i++){deleteBtn[i].onclick = function(){var delets = confirm('确定删除所选商品吗?'); //弹出确认框 if (delets) { listArr.removeChild(this.parentNode); if(this.parentNode.getElementsByClassName('checkone')[0].checked){allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.getElementsByClassName('subtotal')[0].innerHTML);checkNum.innerHTML = parseInt(checkNum.innerHTML)-1;if(oLi.length==0){checkAll.checked = false;} } }}}//多删removesBtn.onclick = function(){if (checkNum.innerHTML != 0) { var delets = confirm('确定删除所选商品吗?'); //弹出确认框 if (delets) { for (var i = 0; i < oLi.length; i++) { if (oLi[i].querySelectorAll('.checkone')[0].checked) { oLi[i].parentNode.removeChild(oLi[i]); // 删除相应节点 i--; //回退下标位置 } } allPrice.innerHTML = 0; checkNum.innerHTML = 0; checkAll.checked = false; } } else { alert('请选择商品!'); }}//数目框输入事件for(var i=0;i<goodsNum.length;i++){goodsNum[i].onkeyup = function(){var val = parseInt(this.value); if (isNaN(val) || val <= 0) { val = 1; } if (this.value != val) { this.value = val; } total_price(); priceAll()}}}</script></body></html>