Tutorial pembangunan troli beli-belah JavaScript dengan fungsi yang sempurna
Dalam 2 bahagian sebelum ini, kami telah menambah dan menolak troli beli-belah, dan fungsi menukar jumlah harga telah selesai, tetapi masih terdapat beberapa masalah kecil
Jika saya memasukkan teks dalam teks kotak, dalam bahasa Inggeris, kita akan Ia perlu diproses
Rakan, fikirkan tentangnya, masukkan kandungan dalam kotak teks, apabila tetikus kita meninggalkan kotak teks, acara kehilangan fokus akan dicetuskan. kami akan menggunakan onblur untuk mengendalikan acara kehilangan fokus ini,
Jika kita memasukkan nombor, maka jumlah harga juga perlu dikira berdasarkan nombor yang kita masukkan
Mari kita tulis fokus yang hilang acara, kod adalah seperti berikut:
<script>
document.getElementById('id').onblur = function(){
var id = document.getElementById('id').value;
//判斷是否是數(shù)字或者是否小于1
if(isNaN(id) || id < 1){
alert("請輸入正確的數(shù)字");
document.getElementById('id').value = 1;
return;
}
document.getElementById('td2').innerHTML = parseInt(id) * parseInt(good);
}Kod di atas: Apabila kandungan teks bukan nombor, atau kurang daripada 1, ia akan menggesa, dan kemudian ia tidak akan melaksanakan lebih jauh dan kembali terus kepada
Jadi kami telah melengkapkan fungsi ini
Kod lengkap adalah seperti berikut:
<!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);
}
//減號功能
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;
}
}
document.getElementById('id').onblur = function(){
var id = document.getElementById('id').value;
//判斷是否是數(shù)字或者是否小于1
if(isNaN(id) || id < 1){
alert("請輸入數(shù)字");
document.getElementById('id').value = 1;
return;
}
document.getElementById('td2').innerHTML = parseInt(id) * parseInt(good);
}
}
</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>
