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;
//判断是否是数字或者是否小于1
if(isNaN(id) || id < 1){
alert("请输入正确的数字");
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文本内容
//加号功能
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>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
