javascript開發(fā)購(gòu)物車教程之實(shí)現(xiàn)減號(hào)功能
上一節(jié)我們學(xué)習(xí)到了，加號(hào)功能的實(shí)現(xiàn)，下面我們來(lái)講解減號(hào)功能
先來(lái)看一下上節(jié)代碼
<!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)容
//加號(hào)功能
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>單價(jià)</th>
<th>數(shù)量</th>
<th>總價(jià)</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>我們?cè)谶@個(gè)基礎(chǔ)上繼續(xù)寫減號(hào)功能
減號(hào)的功能很簡(jiǎn)單，我們可以吧加號(hào)的代碼拷貝過(guò)來(lái)，然后稍作修改即可
<script>
document.getElementById('a1').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>這樣我們的減號(hào)功能就實(shí)現(xiàn)了，但是需要注意，還是有點(diǎn)小問(wèn)題的，當(dāng)我們減到1之后，是可以一直繼續(xù)減的，這樣就會(huì)出現(xiàn)負(fù)數(shù)，所以這塊，我們需要在進(jìn)行處理一下
當(dāng)我們數(shù)量值大于1的時(shí)候，可以一直減，當(dāng)不大于1的時(shí)候，我們可以給數(shù)量框一個(gè)默認(rèn)值
代碼如下：
<script>
document.getElementById('a1').onclick = function(){
var v1 = document.getElementById('id').value;
if(v1>1){
v1=parseInt(v1);
document.getElementById('id').value = v1 - 1;
document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1-1);
}else{
document.getElementById('id').value=1;
}
}
</script>這樣我們一個(gè)購(gòu)物車加減功能，總價(jià)隨數(shù)量變化而變化的功能我們就完成了，完整代碼如下：
<!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)容
//加號(hào)功能
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);
}
//減號(hào)功能
document.getElementById('a1').onclick = function(){
var v1 = document.getElementById('id').value;
if(v1>1){
v1=parseInt(v1);
document.getElementById('id').value = v1 - 1;
document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1-1);
}else{
document.getElementById('id').value=1;
}
}
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名稱</th>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>總價(jià)</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>
