前端开发网站案例：js实现购物车效果
摘要：前端开发购物网站的技术点|购物网站前端开发|qt 前端开发环境搭建 本人第一次尝试用这种方式去实现一个效果，如有不对的地方欢迎指出 html 代码 <!DOCTYPE html> <html lang=”en”> <……
前端开发购物网站的技术点|购物网站前端开发|qt 前端开发环境搭建
本人第一次尝试用这种方式去实现一个效果，如有不对的地方欢迎指出
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
body {
font-family: microsoft yahei;
}
.ul-list {
overflow: hidden;
}
.box {
width: 765px;
margin: 0 auto;
}
.ul-list li {
float: left;
height: 100px;
margin: 10px;
cursor: pointer;
}
.ul-list li img {
width: auto;
height: 100px;
}
.shopping {
margin: 10px;
border: 1px solid #EBEBEB;
background: #FAFAFA;
}
.shopping-cart {
margin-top: 10px;
background: #eee;
}
.shopping-icon {
width: 100px;
height: auto;
text-align: center;
position: relative;
float: left;
}
.shopping img {
width: 80px;
height: auto;
}
.shopping span#cartText {
position: absolute;
top: 10px;
left: 50%;
margin-left: -20px;
color: red;
font-weight: bold;
border: 2px solid #ddd;
border-radius: 50%;
width: 20px;
height: 20px;
background: #fff;
}
.shopping-list {
padding: 0 20px 20px;
}
.shopping-list li {
padding: 20px;
border-bottom: 1px dashed #ccc;
overflow: hidden;
}
.del {
float: right;
cursor: pointer;
}
.del img {
width: 19px;
height: auto;
}
.shopping-warn {
line-height: 84px;
}
.shopping-warn span {
color: red;
font-size: 16px;
margin: 0 5px;
}
#cartLi img {
float: left;
margin-right: 20px;
}
.title {
float: left;
}
.checkbox {
float: left;
margin-right: 20px;
}
.price,
.cart-num,
.total-price {
margin-left: 10%;
float: left;
}
#cartText {
display: none;
}
.cart-num span {
width: 25px;
line-height: 25px;
border: 1px solid #ccc;
text-align: center;
float: left;
font-weight: bold;
font-size: 20px;
cursor: pointer;
}
.cart-num input {
width: 50px;
text-align: center;
line-height: 25px;
height: 25px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 0;
border-right: 0;
float: left;
}
.total-price {
color: #FF2832;
}
</style>
</head>
<body>
<div class=”box”>
<ul class=”ul-list” id=”liList”>
<li>
<img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150355mnz44v0qv0g4840n.jpg” data-goodsid=”1″ data-price=”¥158″
data-name=”靴子1″ />
</li>
<li>
<img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150355teg22qg1qznqqn8e.jpg” data-goodsid=”2″ data-price=”¥258″
data-name=”靴子2″ />
</li>
<li>
<img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150355qmvwd5zgawfmf7w7.jpg” data-goodsid=”3″ data-price=”¥58″
data-name=”靴子3″ />
</li>
<li>
<img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150355ayxoz3fzagzqp3ma.jpg” data-goodsid=”4″ data-price=”¥28″
data-name=”靴子4″ />
</li>
</ul>
<div class=”shopping”>
<div class=”shopping-list”>
<ul id=”cartLi”></ul>
</div>
<div class=”shopping-cart”>
<div class=”shopping-icon”>
<img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150356np944kwdasfaqhmf.png” />
<span id=”cartText”></span>
</div>
<div class=”shopping-warn” id=”shopping-warn”>购物车空空的哦~~</div>
</div>
</div>
</div>
<script>
var $ = function (selectors, obj) {
return (obj || document).querySelector(selectors);
};
function Cart(card, liList, cartText, shoppingWarn) {
this.liList = $(liList);
this.cardId = $(card);
this.cartText = $(cartText);
this.shoppingWarn = $(shoppingWarn);
}
Cart.prototype = {
constructor: Cart,
add: function (id, name, price, src, allPrice) {
var f = 1;
for (var i = 0; i < this.cardId.children.length; i++) {
if (this.cardId.children[i].getAttribute(“data-goodsid”) == id) {
f = 0;
break;
}
}
if (!f) return;
this.cardId.innerHTML += ‘<li data-goodsid=”‘ + id + ‘”>’ +
‘<img src = “‘ + src + ‘” />’ +
‘<div class=”title”>’ + name + ‘</div>’ +
‘<div class=”price”>’ + price + ‘</div>’ +
‘<div class=”cart-num”>’ +
‘<span class=”shop-l” id=”minus’ + id + ‘” data-price=”‘ + price + ‘”>-</span>’ +
‘<input type=”text” value=”1件” id=”numId’ + id + ‘” />’ +
‘<span class=”shop-r” id=”plus’ + id + ‘” data-price=”‘ + price + ‘”>+</span>’ +
‘</div>’ +
‘<div class=”total-price”>’ + allPrice + ‘</div>’ +
‘<div class=”del”><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150355cv6nfn9y31z93n41.png” class=”del-btn”></div>’ +
‘</li>’;
var num = this.cardId.children.length;
if (this.cardId.children.length > 0) {
this.cartText.style.display = “block”;
}
this.cartText.innerHTML = num;
this.shoppingWarn.innerHTML = “购物车一共” + num + “个宝贝”;
},
remove: function (node) {
this.cardId.removeChild(node);
var num = this.cardId.children.length;
this.cartText.innerHTML = num;
this.shoppingWarn.innerHTML = “购物车一共” + num + “个宝贝”;
if (this.cardId.children.length == “0”) {
this.cartText.style.display = “none”;
this.shoppingWarn.innerHTML = ‘购物车空空的哦~~’;
}
},
minus: function (targetDom) {
var input = targetDom;
input.value = parseInt(input.value) – 1 + “件”;
if (parseInt(input.value) < 1) {
input.value = 1 + “件”;
}
},
plus: function (targetDom) {
var input = targetDom;
input.value = parseInt(input.value) + 1 + “件”;
},
init: function () {
var that = this;
//添加到购物车
this.liList.onclick = function (e) {
e.preventDefault();
console.log(e.srcElement)
var target = e.srcElement ? e.srcElement : e.target;
var name = target.getAttribute(“data-name”),
price = target.getAttribute(“data-price”),
id = target.getAttribute(“data-goodsid”),
src = target.getAttribute(“src”),
allPrice = price.substr(1);
that.add(id, name, price, src, allPrice);
};
//
this.cardId.onclick = function (e) {
e.preventDefault();
var target = e.srcElement ? e.srcElement : e.target;
//删除购物车列表
if (target.className == “del-btn”) {
that.remove(target.parentNode.parentNode);
}
//减少数量
if (target.className == “shop-l”) {
var input = target.nextSibling;
that.minus(input);
var priceN = input.value,
subInp = priceN.substr(0, 1),
priceSig = target.getAttribute(“data-price”),
subPri = priceSig.substr(1),
priceAll = subPri * subInp;
target.parentNode.nextSibling.innerHTML = priceAll;
}
//增加数量
if (target.className == “shop-r”) {
var input = target.previousSibling;
that.plus(input);
var priceN = input.value,
subInp = priceN.substr(0, 1),
priceSig = target.getAttribute(“data-price”),
subPri = priceSig.substr(1),
priceAll = subPri * subInp;
target.parentNode.nextSibling.innerHTML = priceAll; //总价
}
};
}
};
var cart = new Cart(“#cartLi”, “#liList”, “#cartText”, “#shopping-warn”);
cart.init();
</script>
</body>
</html>
前端开发必知道的网站|网站前端开发公众号|网站开发后台前端数据库
» 本文来自：前端开发者 » 《前端开发网站案例：js实现购物车效果》
» 本文链接地址：https://www.rokub.com/5002.html
» 您也可以订阅本站：https://www.rokub.com
近期评论