<!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;transition: 0.5s;} .list_act{animation: changeHeight .35s;} @keyframes changeHeight{ from{height:120px;} to{height:0px;} } .list li:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.2); transform: translate3d(0,-2px,0); transition: 0.5s; z-index: 9; position: relative; } .list li:hover .name{color:#FF5500;} .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; } .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('确定删除所选商品吗？'); //弹出确认框 var dataId = this.parentNode.getAttribute('data-id'); if (delets) { this.parentNode.className = 'list_act'; console.log(this.parentNode.className) var that = this; setTimeout(function(){ listArr.removeChild(that.parentNode); // 删除相应节点 },350) 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; } } } if(idArry.indexOf(dataId)!=-1){ idArry = remove(idArry,dataId); } console.log(idArry) if(idArry == ''){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; idArry = []; } } 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的购物车，所以就抽空码了一个，多有不足，阅览后请指教