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="td">1999</td>
<td>
<a href="#" id="a1" class="tp1">-</a>
<input type="text" value="1" id="id">
<a href="#" id="a2" class="tp2">+</a>
</td>
<td id="td2">1999</td>
</tr>
</table>
</body>
</html>下面我們來寫加號的功能??? id? 是 a2 ?? 看下面代碼
<script type="text/javascript">
window.onload=function(){
var input = document.getElementById('id').value; //獲取文本框的value值
var good = document.getElementById('td').innerHTML; //獲取id是td的html文本內(nèi)容
document.getElementById('a2').onclick = function(){
var v1 = document.getElementById('id').value;
v1=parseInt(v1);
document.getElementById('id').value = v1 + 1;
document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1);
}
}
</script>首先我們獲取數(shù)量框的值，獲得總價框的html內(nèi)容，當(dāng)點(diǎn)擊加號時
用v1來接收數(shù)量框的值
注意：當(dāng)點(diǎn)擊加號時，此時數(shù)量已經(jīng)發(fā)生變化，
然后我們把v1 使用parseInt函數(shù)進(jìn)行轉(zhuǎn)換成數(shù)字，此時的數(shù)量值已經(jīng)是2了
所以我們使用document.getElementById('id').value = v1 + 1;
然后我們給總價框的html 進(jìn)行賦值，數(shù)量乘以單價
這樣我們購物車點(diǎn)擊加號，總價發(fā)生變化的功能已經(jīng)實(shí)現(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">
window.onload=function(){
var input = document.getElementById('id').value; //獲取文本框的value值
var good = document.getElementById('td').innerHTML; //獲取id是td的html文本內(nèi)容
document.getElementById('a2').onclick = function(){
var v1 = document.getElementById('id').value;
v1=parseInt(v1);
document.getElementById('id').value = v1 + 1;
document.getElementById('td2').innerHTML = parseInt(good) * 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="td">1999</td>
<td>
<a href="#" id="a1" class="tp1">-</a>
<input type="text" value="1" id="id">
<a href="#" id="a2" class="tp2">+</a>
</td>
<td id="td2">1999</td>
</tr>
</table>
</body>
</html>
