直接复制粘贴即可
<!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%;
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;
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>
效果展示如下：
