今天在做购物车的页面，遇到结算的功能。如图：
暂时先做了点击加减数量的时候，金额变化的功能。
废话不多说，贴上代码：
html:
<div class="sc-mid-box">
<div class="sc-mid-list fl">
<div class="d1 fl">
<div class="d1-input fl"></div>
<img src="images/collection_auction-01.png">
</div>
<div class="d2 fl">收藏级冰种水润贵妃手镯</div>
<div class="d3 fl">
<p class="p1"><span>1.8001</span>万</p>
<p class="p2"><span class="per">1.6001</span>万</p>
</div>
<div class="d4 fl">
<div class="d4-div">
<div class="reduce fl">-</div>
<input type="text" class="count fl" value="1" >
<div class="add fl">+</div>
</div>
</div>
<div class="d5 fl">
<span class="cart-price">1.6001</span>万
</div>
<div class="d6 fl">删除</div>
</div>
</div>
在实现功能之前，听着大神讲解思路。可是越听越晕。无奈，只能一步两步……一步两步……慢慢写，边走边捋清思路。
后来冷静下来，有点想明白了。
大概实现的思路是，获取单价转化成浮点数，获取数量转化成整数，再把两者相乘。最后把结果赋给金额即可。
js代码：
//加
$(".add").click(function(){
var input = $(this).siblings(".count");
var obj = $(this).parents(".d4");
var per = parseFloat(obj.siblings(".d3").find(".per").text());//获取单价转化成浮点数
var num = '';
var price = '';
input.attr("value", parseInt(input.attr("value")) + 1 );//获取input的值，转化成整数再+1
num = input.attr("value");
price = num*per;//计算金额
obj.siblings(".d5").find(".cart-price").text(price);//将结果赋给金额
})
这是在加数量的时候显示金额，减数量其实同理。在这里就不列出来了。
其实结算的功能不止这些，比如很多种商品的总金额。由于时间的原因，暂时就写这么多。
后续的功能，会在后面的博客里提到，尽请期待。