Javascript membangunkan fungsi troli beli-belah untuk melaksanakan pemprosesan kotak teks
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);//獲得數(shù)量
if(isNaN(v1) || v1 < 1){
alert("請輸入正確的數(shù)字");
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);//獲得數(shù)量
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);//獲得數(shù)量
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);//獲得數(shù)量
if(isNaN(v1) || v1 < 1){
alert("請輸入正確的數(shù)字");
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>數(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>
