Web完善购物车效果
摘要： idea 开发前端的插件 atom前端开发常用插件 前端开发vscode插件 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8&#……
| idea 开发前端的插件 |
| atom前端开发常用插件 |
| 前端开发vscode插件 |
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;
overflow: hidden;
}
.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;
float: left;
}
.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;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 0;
border-right: 0;
float: left;
}
.total-price {
color: #ff2832;
}
.tota-priceAll {
float: right;
line-height: 84px;
margin-right: 20px;
}
.tota-priceAll span {
color: red;
}
</style>
</head>
<body>
<div class=”box”>
<ul class=”ul-list” id=”liList”>
<li>
<img
src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/22/142806mh0cka000aomxnr0.jpg”
data-goodsid=”1″
data-price=”¥158″
data-name=”靴子1″
/>
</li>
<li>
<img
src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/22/142806psxijk3xjpfzpp36.jpg”
data-goodsid=”2″
data-price=”¥258″
data-name=”靴子2″
/>
</li>
<li>
<img
src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/22/142806jg5j7iq9rj3rrz00.jpg”
data-goodsid=”3″
data-price=”¥58″
data-name=”靴子3″
/>
</li>
<li>
<img
src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/22/143138u4kl46hl6xn0644q.jpg”
data-goodsid=”4″
data-price=”¥28″
data-name=”靴子4″
/>
</li>
<li>
<img
src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/22/143219hlblixu24vyivuxl.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/22/142806lclzu229u1zikkj2.png”
/>
<span id=”cartText”></span>
</div>
<div class=”shopping-warn” id=”shopping-warn”>
购物车里空空的哦~~
</div>
<div class=”tota-priceAll”>总价：<span>0</span>元</div>
</div>
</div>
</div>
<script>
$(function() {
var cart = {
imgList: $(‘#liList’),
addList: $(‘#cartLi’),
cartText: $(‘#cartText’),
shoppingWarn: $(‘#shopping-warn’),
endPrice: $(‘.tota-priceAll span’),
totalCount: 0,
totalPrice: 0,
add: function(id, name, price, src, allPrice) {
var len = this.addList.find(‘li’).length
var f = 1
for (var i = 0; i < len; i++) {
if (
$(this.addList.find(‘li’)[i]).attr(
‘data-goodsid’,
) == id
) {
f = 0
var tagLi = this.addList.find(‘li’)[i],
inp = $(tagLi)
.find(“input[type=’text’]”)
.val(),
upDateNum = parseInt(inp)
$(tagLi)
.find(“input[type=’text’]”)
.val(upDateNum + 1 + ‘件’)
//总价
var sigPrice = allPrice,
inpV = inp.replace(‘件’, ”),
allInp = inpV * 1
var allNum = allInp * sigPrice + sigPrice * 1
$(tagLi)
.find(‘.total-price’)
.html(allNum)
break
}
}
if (!f) return
var str = ”
str +=
‘<li data-goodsid=”‘ +
id +
‘”>’ +
‘<div class=”checkbox”>’ +
‘<input type=”checkbox” />’ +
‘</div>’ +
‘<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/22/142806vbnohmddcyjcpdoh.png” class=”del-btn”></div>’ +
‘</li>’
this.addList.append(str)
},
del: function(node) {
node.remove()
},
plus: function(targetEle, sigPrice, allPrice) {
var inp = targetEle
inp.val(parseInt(inp.val()) + 1 + ‘件’)
//总价
var inpVal = parseInt(inp.val())
var sigPrice = sigPrice
var allNum = inpVal * sigPrice
allPrice.text(allNum)
},
minus: function(targetEle, sigPrice, allPrice) {
var inp = targetEle
inp.val(parseInt(inp.val()) – 1 + ‘件’)
if (parseInt(inp.val()) < 1) {
inp.val(1 + ‘件’)
}
//总价
var inpVal = parseInt(inp.val())
var sigPrice = sigPrice
var allNum = inpVal * sigPrice
if (inpVal <= 1) {
allPrice.text(sigPrice)
} else {
allPrice.text(allNum)
}
},
init: function() {
var that = this
//添加到购物车
this.imgList.on(‘click’, function(e) {
var target = e.target
var name = $(target).attr(‘data-name’),
price = $(target).attr(‘data-price’),
id = $(target).attr(‘data-goodsid’),
src = $(target).attr(‘src’),
allPrice = price.substr(1)
that.add(id, name, price, src, allPrice)
that.cartText.css(‘display’, ‘block’)
//总数量
var addT = (that.totalCount += 1)
that.cartText.text(addT)
that.shoppingWarn.text(
‘购物车一共’ + addT + ‘个宝贝’,
)
//总价
var sigEnd = allPrice * 1
var endPrice = (that.totalPrice += sigEnd)
that.endPrice.html(endPrice)
})
//列表
this.addList.on(‘click’, function(e) {
var target = e.srcElement ? e.srcElement : e.target
//删除商品
if (target.className == ‘del-btn’) {
var input = $(target)
.parents(‘li’)
.find(‘input[type=”text”]’)
.val(),
subInp = input.replace(‘件’, ”)
if (subInp <= 1) {
that.del($(target).parents(‘li’))
} else {
subInp–
$(target)
.parents(‘li’)
.find(‘input[type=”text”]’)
.val(subInp + ‘件’)
}
//总数量
var addT = (that.totalCount -= 1)
that.cartText.text(addT)
that.shoppingWarn.text(
‘购物车一共’ + addT + ‘个宝贝’,
)
if (that.cartText.text() == 0) {
that.cartText.css(‘display’, ‘none’)
that.shoppingWarn.text(‘购物车空空的哦~~’)
}
//总价
var price = $(target)
.parents(‘li’)
.find(‘.price’)
.text(),
allPrice = price.substr(1)
var sigEnd = allPrice * 1
var endPrice = (that.totalPrice -= sigEnd)
that.endPrice.html(endPrice)
}
//增加商品
if (target.className == ‘shop-r’) {
var input = $(target).prev(‘input’),
price = $(target)
.parents(‘li’)
.find(‘.price’)
.text(),
subPrice = price.substr(1),
allPrice = $(target)
.parents(‘li’)
.find(‘.total-price’)
that.plus(input, subPrice, allPrice)
//总数量
var addT = (that.totalCount += 1)
that.cartText.text(addT)
//总价
var price = $(target).attr(‘data-price’),
allPrice = price.substr(1)
var sigEnd = allPrice * 1
var endPrice = (that.totalPrice += sigEnd)
that.endPrice.html(endPrice)
}
//减少商品
if (target.className == ‘shop-l’) {
var input = $(target).next(‘input’),
subInp = input.val().replace(‘件’, ”),
price = $(target)
.parents(‘li’)
.find(‘.price’)
.text(),
subPrice = price.substr(1),
allPrice = $(target)
.parents(‘li’)
.find(‘.total-price’)
that.minus(input, subPrice, allPrice)
//总数量
if (subInp <= 1) {
that.cartText.text(that.totalCount)
} else {
var addT = (that.totalCount -= 1)
that.cartText.text(addT)
}
//总价
var price = $(target).attr(‘data-price’),
allPrice = price.substr(1)
var sigEnd = allPrice * 1
if (subInp <= 1) {
that.endPrice.html(that.totalPrice)
} else {
var endPrice = (that.totalPrice -= sigEnd)
that.endPrice.html(endPrice)
}
}
})
},
}
cart.init()
})
</script>
</body>
</html>
| 前端 开发插件vim |
| 谷歌前端开发插件 |
| 前端调用接口的开发的插件 |
» 本文来自：前端开发者 » 《Web完善购物车效果》
» 本文链接地址：https://www.rokub.com/6350.html
» 您也可以订阅本站：https://www.rokub.com
近期评论