购买商品购物车界面的价格结算
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车的基本实现</title>
</head>
<body>
<h2>购物车的基本实现</h2>
全部商品<font color="red"><b>{$count}</b></font>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th><input type="checkbox" name="check" value="">全选</th>
<th>商品图片</th>
<th>商品名称</th>
<th>商品属性</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
{volist name="data" id="v"}
<tr>
<td><input type="checkbox" name="check" class="check" value="{$v.sid}"></td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547012448308&di=356338333063fa0fb4d902fc7ea994c5&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D1887458228%2C1232896188%26fm%3D214%26gp%3D0.jpg" alt="商品图片" width="100" height="100"></td>
<td>商品</td>
<td>
<span>颜色:</span><br>
<span>尺寸:</span>
</td>
<td>¥<span class="unit">100</span></td>
<td>
<input type="button" value="-" class="jian">
<span class="num">1</span>
<input type="button" value="+" class="jia">
</td>
<td class="subtotal">{$v.subtotal}</td>
<td>
<a href="#">删除</a>
</td>
</tr>
{/volist}
</table>
<div style="margin-left: 250px;">
已选择<span class="goods_num">0</span>件商品 总价(不含运费):¥<span class="goods_price"></span> <a href="#">结算</a>
</div>
<script src="./goods/js/jquery-1.9.1.min.js"></script>
<script>
//拿出来一张白纸(定义一个空数组)
var arr = [];
//定义一个全局数组,用来收集和计算总价
var price = [];
//点击加号实现的效果
$(document).on('click','.jia',function () {
//获取数量
var num = $(this).prev().text();
//自增1
var last_num = parseInt(num)+1;
//替换
$(this).prev().text(last_num);
//获取单价
var unit_price = $(this).parents("tr").find(".unit").text();
//计算出小计的总价
var sum_price = unit_price*last_num;
//替换小计这一部分的节点td
$(this).parents("tr").find(".subtotal").text(sum_price);
});
//点击减号实现的效果
$(document).on('click','.jian',function () {
//获取数量
var num = $(this).next().text();
//自增1
var last_num = parseInt(num)-1 <= 1 ? 1 : parseInt(num)-1;
//替换
$(this).next().text(last_num);
//获取单价
var unit_price = $(this).parents("tr").find(".unit").text();
//计算出小计的总价
var sum_price = unit_price*last_num;
//替换小计这一部分的节点td
$(this).parents("tr").find(".subtotal").text(sum_price);
})
//点击多选框实现数量的统计
$(document).on('click','.check',function () {
var obj = $(this);
// console.log(obj[0].checked);
// return;
//获取多选框的值(拿到名字)
var check_val = $(this).val();
//给数组追加元素(给纸上写名字)
if(obj[0].checked){
arr.push(check_val);
//计算价格
var xiaoji = $(this).parents("tr").find(".subtotal").text();
price.push(xiaoji);
}else{
arr.splice($.inArray(check_val,arr),1);
price.splice($.inArray(xiaoji,price),1)
}
//计算数组的长度,然后替换
$(".goods_num").text(arr.length)
//计算价格
var str = 0;
$.each(price,function (k,v) {
str += parseInt(v);
})
$(".goods_price").text(str);
})
</script>
</body>
</html>
- 实现购物车内商品的价格计算
另个通用的金额结算公式
function TotalPrice() {
var allprice = 0; //总价
$(".shop-cart-listbox1").each(function() { //循环每个店铺
var oprice = 0; //店铺总价
$(this).find(".btn2").each(function() { //循环店铺里面的商品
if ($(this).is(":checked")) { //如果该商品被选中
var num = $(this).parents(".index-goods").find(".shop-cart-numer").val(); //得到商品的数量
var price = parseFloat($(this).parents(".index-goods").find(".priceJs").text()); //得到商品的单价
var total = price * num; //计算单个商品的总价
oprice += total; //计算该店铺的总价
}
$(this).closest(".shop-cart-listbox1").find(".ShopTotal").text(oprice.toFixed(2)); //显示被选中商品的店铺总价
});
var oneprice = parseFloat($(this).find(".ShopTotal").text()); //得到每个店铺的总价
allprice += oneprice; //计算所有店铺的总价
});
$("#AllTotal").text(allprice.toFixed(2)); //输出全部总价
}