花了半天的时间扣了一个购物车,以下是效果图及源码:
<!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('确定删除所选商品吗?'); //弹出确认框
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()
}
}
}
</script>
</body>
</html>
css
*{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;}
之前做过JQ的购物车,一直想写一个纯js的购物车,所以就抽空码了一个,多有不足,阅览后请指教;
转载请说明出处附链接,谢谢~~~