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;
//判断是否是数字或者是否小于1
if(isNaN(id) || id < 1){
alert("请输入正确的数字");
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文本内容
//加号功能
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;
//判断是否是数字或者是否小于1
if(isNaN(id) || id < 1){
alert("请输入数字");
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>数量</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>