Tutoriel de développement de panier d'achat JavaScript avec des fonctions parfaites
Dans les 2 sections précédentes, nous avons ajouté et soustrait le panier, et la fonction de modification du prix total est terminée, mais il y a encore quelques petits problèmes
Si je saisis du texte dans le texte box, en anglais, nous le ferons. Il doit être traité
Amis, réfléchissez-y, entrez du contenu dans la zone de texte, lorsque notre souris quittera la zone de texte, un événement de perte de concentration sera déclenché. Ensuite, nous utiliserons onblur pour gérer cet événement de perte de concentration,
Si nous saisissons des chiffres, le prix total doit également être calculé en fonction des chiffres que nous saisissons
écrivons la perte de événement focus, le code est le suivant?:
<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);
}Le code ci-dessus?: lorsque le contenu du texte n'est pas un nombre ou est inférieur à 1, il vous demandera, puis il ne s'exécutera plus et ne retournera pas directement à
Nous avons donc complété cette fonction
Le code complet est le suivant :
<!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>
