Dalam dua bahagian terakhir, kami telah melengkapkan fungsi penambahan dan penolakan Sekarang mari kita proses bilangan kotak teks
Dalam keadaan biasa, kami boleh memasukkan kotak teks, dan kami juga membenarkannya di sini. Input, apabila kita memasukkan perenggan aksara, atau bahasa Cina
kita tidak seharusnya melaksanakannya, memberikan mesej segera, dan kemudian memberikan kotak teks nilai lalai. Mari lihat kod di bawah:
<script>
function a3(td,td2,id){
var price = document.getElementById(td).innerHTML;//获得单价
var total = document.getElementById(td2).innerHTML;//获得总价
var v1 = parseInt(document.getElementById(id).value);//获得数量
if(isNaN(v1) || v1 < 1){
alert("请输入正确的数字");
document.getElementById(id).value = 1 ;
v1 = parseInt(document.getElementById(id).value);
}else{
document.getElementById(id).value = v1 ;
}
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1);
}
</script> v1 ialah nilai kotak teks yang kami perolehi Untuk menilai v1, fungsi isNaN() mengesan sama ada v1 ialah nombor yang tidak sah dalam kes sedemikian, kami memberikan nilai lalai Nilai ini diberikan kepada kuantiti
Berikut menunjukkan kod lengkap untuk fungsi penambahan dan penolakan serta pemprosesan kotak teks:
<!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;
}
}
function a3(td,td2,id){
var price = document.getElementById(td).innerHTML;//获得单价
var total = document.getElementById(td2).innerHTML;//获得总价
var v1 = parseInt(document.getElementById(id).value);//获得数量
if(isNaN(v1) || v1 < 1){
alert("请输入正确的数字");
document.getElementById(id).value = 1 ;
v1 = parseInt(document.getElementById(id).value);
}else{
document.getElementById(id).value = v1 ;
}
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1);
}
</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>