HTML5+CSS3+JavaScript 实现淘宝购物车
1.在一个里面写的,好复制。。。。。下边有分开写的 备注详细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style>
.block{
width: 800px;
height: auto;
min-height: 30px;
border: 1px solid silver;
margin: auto;
}
.title{
display: flex;
flex-direction: row;
}
.title>div{
flex: 1;
border-bottom: 1px solid silver;
border-right: 1px solid silver;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 13px;
}
.title>div:nth-child(i) input{
position: relative;
top: 2px;
}
.h_list{
display: flex;
flex-direction: row;
}
.h_list>div{
flex: 1;
text-align: center;
line-height: 80px;
border: 1px solid silver;
}
.leftbtn,.rightbtn,.txt{
display: inline-block;
width: 30px;
text-align: center;
}
.iscolor{
background: antiquewhite;
}
</style>
</head>
<body>
<div class="block">
<div class="title">
<div><input type="checkbox" id="allcheck"/>全选/反选</div>
<div>名称</div>
<div>单价</div>
<div>数量</div>
<div>小计</div>
<div>操作</div>
</div>
</div>
<div>
总计:<label id="label"></label>
</div>
<script>
var data=[{
name:"短袖",
price:40,
num:1,
totle:40
},
{
name:"短袖",
price:120,
num:1,
totle:120
},
{
name:"短袖",
price:80,
num:1,
totle:80
},
{
name:"短袖",
price:110,
num:1,
totle:110
}
];
var block=document.querySelector(".block");
var allcheck=document.getElementById("allcheck");
showEle();
function showEle(){
for (var i = 0; i <data.length ; i++) {
var h_list=document.createElement("div");
h_list.setAttribute("class","h_list");
var div_v_f=document.createElement("div")
var check=document.createElement("input");
check.type="checkbox";
check.index=i;
check.addEventListener("click",ckcolor);
check.className="all";
div_v_f.appendChild(check);
h_list.appendChild(<