Tutoriel de panier de développement JavaScript Fonction d'implémentation JS
Utiliser JS pour concevoir des fonctions
Additionnelles et soustractives effets
Ajoutez un événement onclick chacun à nos value="+" et value="-"
< ; input type="bouton" value="-" onclick="moins()"/>
<input type="bouton" value="+" onclick=" add ()"/>
Ajouter du code js dans la balise <script></script> ci-dessus
//Press + bouton
function add(){
//Obtenir le nombre de produits sur la page actuelle
var num=document.getElementById("text").value;
//Ajoutez-en un à la quantité puis attribuez-le à l'attribut value dans le <inpue> ; qui affiche la quantité du produit
++num;
document.getElementById("text").value=num;
//Récupérez la quantité du produit sur la page actuelle, multipliez-la par le prix extrait et attribuez-la au contenu d'affichage de la page du div auquel appartient le sous-total
var price=document.getElementById("price ").innerHTML;
var subtotal=price*num;
document.getElementById("subtotal").innerHTML=price*num ;
}
//Appuyez sur le bouton -
fonction moins(){
var num=document.getElementById("text").value;
//Déterminer si la quantité du produit est inférieure à 1, si elle est inférieure à tout Attribuer la valeur à 0
if(--num<1) {
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//Récupérer la quantité de la page en cours, multipliez-le par le prix, et attribuez-le au contenu d'affichage de la page du div auquel appartient le sous-total
//Réaffecter num, c'est placer la situation où num=-1 se produit
var num=document.getElementById("text").value;
var price=document.getElementById("price"). innerHTML;
document.getElementById("subtotal").innerHTML=price*num;
｝
Le code est le suivant?:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>簡(jiǎn)易購(gòu)物車</title>
<meta charset="utf-8" />
<style>
.shop{
width:400px;
background-color:#f0f0f0;
text-align:center;
}
.shop2{
text-align:center;
clear:both;
border:1px solid black;
height:21px;
}
.goods{
float:left;
width:100px;
}
.price{
float:left;
width:50px;
}
.number{
float:left;
width:110px;
}
.subtotal{
float:left;
width:50px;
margin-top:2px;
}
.delete{
float:left;
width:35px;
margin-left:5px;
}
.text{
width: 22px;
text-align:center;
}
</style>
<script >
//按下+按鈕
function add(){
//取出當(dāng)前頁面的數(shù)量
var num=document.getElementById("text").value;
//將數(shù)量加一然后再賦值給顯示數(shù)量的<inpue>中的value屬性
++num;
document.getElementById("text").value=num;
//取出當(dāng)前頁面的數(shù)量，與數(shù)量相乘，賦值給小計(jì)所屬的div的頁面顯示內(nèi)容
var price=document.getElementById("price").innerHTML;
var subtotal=price*num;
document.getElementById("subtotal").innerHTML=price*num;
}
//按下-按鈕
function minus(){
var num=document.getElementById("text").value;
//判斷數(shù)量是不是負(fù)數(shù)
if(--num<1){
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//取出當(dāng)前頁面的數(shù)量，與數(shù)量相乘，賦值給小計(jì)所屬的div的頁面顯示內(nèi)容
//給num重新賦值是放置出現(xiàn)num=-1情況
var num=document.getElementById("text").value;
var price=document.getElementById("price").innerHTML;
document.getElementById("subtotal").innerHTML=price*num;
}
</script>
</head>
<body>
<!--購(gòu)物車標(biāo)題-->
<div class="shop">
<div class="title">簡(jiǎn)易購(gòu)物車</div>
<div class="goods">商品</div>
<div class="price">單價(jià)</div>
<div class="number">數(shù)量</div>
<div class="subtotal">小計(jì)</div>
<div class="delete">操作</div>
</div>
<!--商品內(nèi)容-->
<div class="shop2" id="shop2">
<form>
<div class="goods">小米MIX </div>
<div class="price" id="price">5000</div>
<div class="number">
<input type="button" value="-" onclick="minus()"/>
<input type="text" value="1" class="text" id="text"/>
<input type="button" value="+" onclick="add()"/>
</div>
<div class="subtotal" id="subtotal">5000</div>
<div class="delete"><a href="#">刪除</a></div>
<form>
</div>
</body>
</html>Cliquez sur les signes + et - pour obtenir des effets d'addition et de soustraction , mais lorsque l'utilisateur souhaite saisir lui-même des nombres, nous ne pouvons pas permettre au sous-total de changer en conséquence, nous devons donc également ajouter un événement flou à l'entrée avec id="text", en utilisant la fonction isNaN () pour juger , lorsque l'utilisateur saisit un non-numéro, invitez-le à
saisir pour ajouter un événement onblur
<input type="text" value= "1" class="text" id="text" onblur="change()"/>
Code JS ajouté
/ /Quand l'utilisateur modifie le numéro dans la zone <input>, la fonction change() est déclenchée une fois que le curseur est flou
function change(){
// Déterminez si la saisie de l'utilisateur ne contient pas de chiffres. Si tel est le cas, rappelez à l'utilisateur
if(isNaN(document.getElementById("text").value )){
alert("Veuillez saisir un numéro");
document.getElementById("text").value=1;
}
//Obtenir la valeur de la zone de saisie avec id="text"
var num= document.getElementById("text").value;
//Obtenir le prix du produit
var price=document .getElementById("price" ).innerHTML;
//Afficher le sous-total
document.getElementById("subtotal").innerHTML= prix*num
}
Supprimer la fonction
Définissez une balise <a> à l'intérieur du <div> supprimé et liez un événement onclick dans le div
<div class="delete" onclick="delect('shop2')"><a href="#">delete</a></div>
Le code JS est le suivant
fonction delect(){
//Supprimer l'identifiant= Ce div de "shop2"
document.body.removeChild(document.getElementById("shop2"));
}
à ce stade, les deux fonctions sont entièrement implémentées. Le code complet est le suivant?:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>簡(jiǎn)易購(gòu)物車</title>
<meta charset="utf-8" />
<style>
.shop{
width:400px;
background-color:#f0f0f0;
text-align:center;
}
.shop2{
text-align:center;
clear:both;
border:1px solid black;
height:21px;
}
.goods{
float:left;
width:100px;
}
.price{
float:left;
width:50px;
}
.number{
float:left;
width:110px;
}
.subtotal{
float:left;
width:50px;
margin-top:2px;
}
.delete{
float:left;
width:35px;
margin-left:5px;
}
.text{
width: 22px;
text-align:center;
}
</style>
<script >
//按下+按鈕
function add(){
//取出當(dāng)前頁面的數(shù)量
var num=document.getElementById("text").value;
//將數(shù)量加一然后再賦值給顯示數(shù)量的<inpue>中的value屬性
++num;
document.getElementById("text").value=num;
//取出當(dāng)前頁面的數(shù)量，與數(shù)量相乘，賦值給小計(jì)所屬的div的頁面顯示內(nèi)容
var price=document.getElementById("price").innerHTML;
var subtotal=price*num;
document.getElementById("subtotal").innerHTML=price*num;
}
//按下-按鈕
function minus(){
var num=document.getElementById("text").value;
//判斷數(shù)量是不是負(fù)數(shù)
if(--num<1){
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//取出當(dāng)前頁面的數(shù)量，與數(shù)量相乘，賦值給小計(jì)所屬的div的頁面顯示內(nèi)容
//給num重新賦值是放置出現(xiàn)num=-1情況
var num=document.getElementById("text").value;
var price=document.getElementById("price").innerHTML;
document.getElementById("subtotal").innerHTML=price*num;
}
//用戶在<input>框中改變數(shù)字時(shí)，光標(biāo)失焦后觸發(fā)change()函數(shù)
function change(){
//判斷用戶輸入的是否為非數(shù)字，是則提醒用戶
if(isNaN(document.getElementById("text").value)){
alert("請(qǐng)輸入數(shù)字");
document.getElementById("text").value=1;
}
//取得id="text"的input框的value值
var num=document.getElementById("text").value;
//取得商品價(jià)格
var price=document.getElementById("price").innerHTML;
//將小計(jì)輸出出去
document.getElementById("subtotal").innerHTML=price*num;
}
function delect(){
//刪除id="shop2"的這個(gè)div
document.body.removeChild(document.getElementById("shop2"));
}
</script>
</head>
<body>
<!--購(gòu)物車標(biāo)題-->
<div class="shop">
<div class="title">簡(jiǎn)易購(gòu)物車</div>
<div class="goods">商品</div>
<div class="price">單價(jià)</div>
<div class="number">數(shù)量</div>
<div class="subtotal">小計(jì)</div>
<div class="delete">操作</div>
</div>
<!--商品內(nèi)容-->
<div class="shop2" id="shop2">
<form>
<div class="goods">小米MIX </div>
<div class="price" id="price">5000</div>
<div class="number">
<input type="button" value="-" onclick="minus()"/>
<input type="text" value="1" class="text" id="text" onblur="change()"/>
<input type="button" value="+" onclick="add()"/>
</div>
<div class="subtotal" id="subtotal">5000</div>
<div class="delete" onclick="delect()"><a href="#">刪除</a></div>
<form>
</div>
</body>
</html>
![Analyse approfondie de JavaScript [Le front-end Web doit conna?tre les compétences de base]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
