购物车

最新推荐文章于 2023-05-26 14:36:40 发布

原创最新推荐文章于 2023-05-26 14:36:40 发布 · 212 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="css/cart.css"/>
<script src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/cart.js"></script>
</head>
<body>
<div id="car" class="car">
<div class="head_row hid">
<div class="img left"> </div>
<div class="name left">商品名称</div>
<div class="price left">单价</div>
<div class="ctrl left">操作</div>
</div>

</div>

css:* {
margin:0;
padding:0;
font-family:"微软雅黑";
list-style:none;
color:#666;
text-decoration:none;
font-size:14px;
}
body {
background:#f5f5f5;
}
.hid {
overflow:hidden;
}
.left {
float:left;
}
#box {
width:978px;
margin:20px auto;
}
#box ul {
margin-right:-14px;
overflow:hidden;
}
#box li {
width:234px;
float:left;
margin-right:14px;
padding:34px 0 20px;
background:#FFF;
text-align:center;
position:relative;
cursor:pointer;
margin-bottom:14px;
}
.pro_img {
width:150px;
height:150px;
margin:0 auto 18px;
}
.pro_name {
display:block;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
font-weight:400;
}
.pro_name a {
color:#333;
}
.pro_price {
color:#ff6700;
margin:0 10px 10px;
}
.pro_rank {
color:#b0b0b0;
}
#box li:hover .add_btn {
display:block;
}
.add_btn {
background:#ff6700;
height:66px;
position:absolute;
width:100%;
bottom:0;
left:0;
line-height:66px;
display:none;
color:#FFF;
font-size:20px;
}
.car {
width:978px;
margin:20px auto;
background:#FFF;
}
.car .img {
width:190px;
}
.car .img img {
display:block;
width:80px;
height:80px;
margin:3px auto;
}
.car .name {
width:350px;
}
.car .name span {
line-height:1;
margin-top:8px;
margin-bottom:8px;
font-size:18px;
font-weight:normal;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
.car .price {
width:144px;
text-align:right;
padding-right:84px;
}
.car .price span {
color:#ff6700;
font-size:16px;
}
.car .ctrl {
width:175px;
padding-right:25px;
text-align:center;
}
.car .ctrl a {
font-size:20px;
cursor:pointer;
display:block;
width:26px;
height:26px;
margin:30px auto;
line-height:26px;
}
.car .ctrl a:hover {
color:#FFF;
background:#ff6700;
}
.head_row {
height:70px;
line-height:70px;
}
.head_row,.row {
border-bottom:solid 1px #e0e0e0;
}
.row {
height:86px;
line-height:86px;
padding:15px 0;
}

js:$(function(){
//有4列从一张表
//<li>
// <div class="pro_img"><img src="http://www.jq22.com/img/cs/500x500a.png" width="150" height="150">
// </div><h3 class="pro_name"><a href="#">小米移动电源10000mAh</a></h3>
// <p class="pro_price">79元</p>
// <p class="pro_rank">18万人评价</p>
// <div class="add_btn">加入购物车</div>
// </li>
var oData=[{
"imgUrl":"images/4.jpg",
"proName":"小米移动电源10000mAh",
"proPrice":"79",
"ProRank":"18"

},{
"imgUrl":"images/3.jpg",
"proName":"小米移动电源10000mAh高配版",
"proPrice":"69",
"ProRank":"1"

},{
"imgUrl":"images/2.jpg",
"proName":"小米圈铁耳机",
"proPrice":"69",
"ProRank":"9"

},{
"imgUrl":"images/1.jpg",
"proName":"小米活塞耳机基础版",
"proPrice":"69",
"ProRank":"6"

}
]

//<li>
// <div class="pro_img"><img src="http://www.jq22.com/img/cs/500x500a.png" >
// </div><h3 class="pro_name"><a href="#">小米移动电源10000mAh</a></h3>
// <p class="pro_price">79元</p>
// <p class="pro_rank">18万人评价</p>
// <div class="add_btn">加入购物车</div>
// </li>
// str 是用来存储我们页面结构 oData[0][imgurl]
var str="";
var oUl=$("#box ul");
for(var i=0;i<oData.length;i++){
str+="<li>";
str+="<div class='pro_img'><img src='"+oData[i]["imgUrl"]+"'></div>";

//str+="<h3 class='pro_name'><a href='#'>'"+oData[i]["proName"]+"'</a></h3>";

str+="<h3 class='pro_name'><a href='#'>"+oData[i]["proName"]+"</a></h3>";
str+="<p class='pro_price'>"+oData[i]["proPrice"]+"元</p>";
str+='<p class="pro_rank">'+oData[i]["ProRank"]+'万人评价</p>';
// str+="<p class='pro_price'>'"+oData[i]["proPrice"]+"'</p>";
// str+="<p class='pro_rank'>'"+oData[i]["ProRank"]+"'</p>";
str+="<div class='add_btn'>加入购物车</div>";
str+="</li>";
}
oUl.append(str);

$(".add_btn").click(function(){
var index=$(this).parent().index(); //1
var data=oData[index];
var appendItems=$("body>.car");
// <div class="row hid"><div class="img left"><img src="images/default.png"></div>
// <div class="name left"><span>小米移动电源10000mAh</span></div>
// <div class="price left"><span>79元</span></div><div class="ctrl left"><a href="javascript:;">×</a></div></div>
var showHtml="";
showHtml+='<div class="row hid">';
showHtml+='<div class="img left"><img src='+data["imgUrl"]+'></div>';
showHtml+='<div class="name left"><span>'+data["proName"]+'</span></div>';
showHtml+='<div class="price left"><span>'+data["proPrice"]+'</span></div>';
showHtml+='<div class="ctrl left"><a href="javascript:;">X</a></div>';
showHtml+='</div>';
appendItems.append(showHtml);
$(".ctrl a").click(get_delete);

})

function get_delete(){
var deleteItem=$(this).parent().parent();
deleteItem.remove();
}
})

</body>
</html>