javascript開發(fā)購物車之函數(shù)實現(xiàn)加號功能
下面我們就來看一下html部分的代碼：
<!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>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名稱</th>
<th>單價</th>
<th>數(shù)量</th>
<th>總價</th>
</tr>
<tr class="tr2">
<td>手表</td>
<td id="price">1999</td>
<td>
<a href="#" id="a1" class="tp1">-</a>
<input type="text" value="1" id="count" >
<a href="#" id="a2" class="tp2">+</a>
</td>
<td id="total">1999</td>
</tr>
<tr class="tr2">
<td>手機</td>
<td id="price_1">2000</td>
<td>
<a href="#" id="a1" class="tp1">-</a>
<input type="text" value="1" id="count_1">
<a href="#" id="a2" class="tp2">+</a>
</td>
<td id="total_1">2000</td>
</tr>
</table>
</br>
</body>
</html>如上代碼，我們有2個商品，如果我們每次多一個商品，都寫一次加減號的功能，那么代碼就太多了，雖然也可以，但是不可取，所以我們下面可以來做一個函數(shù)
我們分析下，函數(shù)的參數(shù)有哪些？
其實做加減功能，然后總價發(fā)生變化，我們需要的就是3個參數(shù)，單價，總價，數(shù)量
大家看上面代碼中的顯示單價的單元格，id 是? price???? 總價單元格，id 是? total? 第一個商品文本框的?? id 是?? count
接下來，我們看單元格的代碼：
<!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>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名稱</th>
<th>單價</th>
<th>數(shù)量</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>如上代碼，我們給加減號都綁定了一個點擊事件，里面帶有3個參數(shù)??? 商品單價? price?? 和 price_1??? 總價 total 和 total_1?? 數(shù)量 count 和 count_1
下面我們來實現(xiàn)加號功能
<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);//獲得數(shù)量
document.getElementById(id).value = v1+1; //獲取點擊后的數(shù)量
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1); //總價格等于單價乘以點擊后的數(shù)量值
}
</script>下面來看以下完整代碼：看看實現(xiàn)的效果怎么樣
<!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);//獲得數(shù)量
document.getElementById(id).value = v1+1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1);
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名稱</th>
<th>單價</th>
<th>數(shù)量</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>看上面的例子，無論我有多少個商品，點擊加號，價格不同，總價也不一樣的，所以使用這樣的方法會方便簡單一點
