直接复制粘贴即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>实现购物车加减计价功能</title></head><style>* { -webkit-tap-highlight-color: rgba(0,0,0,0); outline: 0; margin: 0; padding: 0;}ul, ol { list-style: none;}.items { margin-bottom:10px;}.ui-number { display: inline-block; vertical-align: middle; border: 1px solid #e3e3e3; letter-spacing: 0; height: 2.3rem; line-height: 2.3rem; overflow: hidden;}.radius5 { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}.ui-number .decrease, .ui-number .num {
float: left; text-align: center;}.ui-number .num { height: 100%; width: 3.8rem; border: 0; -webkit-border-radius: 0; border-radius: 0; font-weight: 700;} .ui-number .increase, .ui-number .decrease { font-style: normal; font-size: 1.5rem; font-weight: 700; border: 0; display: inline-block; width: 2rem; height: 100%; -webkit-user-select: none; background: #fafafa;}</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script> $(function(){ $(".add").click(function(){ var t=$(this).parent().find('input[class*=num]'); t.val(parseInt(t.val())+1) setTotal(); }) $(".min").click(function(){ var t=$(this).parent().find('input[class*=num]'); t.val(parseInt(t.val())-1) if(parseInt(t.val())<0){ t.val(0); } setTotal(); }) function setTotal(){ var s=0; $(".items").each(function(){ s+=parseInt($(this).find('input[class*=num]').val())*parseFloat($(this).find('span[class*=price]').text()); }); $("#total").html(s.toFixed(2)); } setTotal();})
</script> <body><div class="items">
<span>单价:</span><span class="price">1.50</span> <em> x </em> <span class="ui-number radius5"> <button type="button" class="decrease radius5 min">-</button> <input class="num" name="number" id="goods_number" autocomplete="off" value="1" min="1" max="100" type="number"> <button type="button" class="increase radius5 add" >+</button> </span> </div><div class="items"> <span>单价:</span><span class="price">3.00</span> <em> x </em> <span class="ui-number radius5"> <button type="button" class="decrease radius5 min">-</button> <input class="num" name="number" id="goods_number" autocomplete="off" value="1" min="1" max="100" type="number"> <button type="button" class="increase radius5 add" >+</button> </span></div><div class="items"> <span>单价:</span><span class="price">4.50</span> <em> x </em> <span class="ui-number radius5"> <button type="button" class="decrease radius5 min">-</button> <input class="num" name="number" id="goods_number" autocomplete="off" value="1" min="1" max="100" type="number"> <button type="button" class="increase radius5 add" >+</button> </span> </div><p>总价：<label id="total"></label></p>
</body></html>
效果展示如下：
