javascript開發購物車之函數實現減號功能
在上一節中，我們已經完成了加號的功能，點擊減號，其實很簡單
我們把加號部分的js 程式碼拷貝一份，然後把加號改減號即可，但是這樣會有一個問題，我們一直減，是可以減到負數的，這樣就不符合我們的要求了
所以，我們首先要進行判斷，代碼如下：
<script>
function a2(td,td2,id){
var price = document.getElementById(td).innerHTML;//获得单价
var total = document.getElementById(td2).innerHTML;//获得总价
var v1 = parseInt(document.getElementById(id).value);//获得数量
if(v1>1){
document.getElementById(id).value = v1-1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1-1);
}else{
var v1 = 1;
}
}
</script> 如上程式碼
先取得單價數量總數，然後判斷，當數字大於1時，我們可以減，不大於1的時候，我們就給個預設值是1
#完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{width:350px;border:1px solid #eee;text-align:center;}
.tr2{height:50px;}
input{width:30px;height:20px;text-align: center;}
a{text-decoration:none}
</style>
<script type="text/javascript">
function a1(td,td2,id){
var price = document.getElementById(td).innerHTML;//获得单价
var total = document.getElementById(td2).innerHTML;//获得总价
var v1 = parseInt(document.getElementById(id).value);//获得数量
document.getElementById(id).value = v1+1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1);
}
function a2(td,td2,id){
var price = document.getElementById(td).innerHTML;//获得单价
var total = document.getElementById(td2).innerHTML;//获得总价
var v1 = parseInt(document.getElementById(id).value);//获得数量
if(v1>1){
document.getElementById(id).value = v1-1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1-1);
}else{
var v1 = 1;
}
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr class="tr2">
<td>手表</td>
<td id="price">1999</td>
<td>
<a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a>
<input type="text" value="1" id="count" onblur="a3('price','total','count')">
<a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a>
</td>
<td id="total">1999</td>
</tr>
<tr class="tr2">
<td>手机</td>
<td id="price_1">1999</td>
<td>
<a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a>
<input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')">
<a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a>
</td>
<td id="total_1">1999</td>
</tr>
</table>
</br>
</body>
</html>這樣我們的加減就已經完成了
