购物车逻辑

小灰灰 2023-02-14 01:46 128阅读 0赞

**当我们添加购物车之后，我们可以点击加减按钮来实现商品数量的增加和减少，当商品数量变化的同时商品的总的价格也是在不停的变化的。**

### 效果图 ###

![在这里插入图片描述][20200530164107562.png]

### 完整代码 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title></title>
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
     
     </head>
     <body>
      <p>商品数量: <span onclick="numDec()">-</span> <input type="text" id="quantity" value="1" /> <span onclick="numAdd()">+</span></p>
       <p class="sdsd">商品价格: <span id="totalPrice">28.10</span></p>
       <input type="hidden" value="28.1" id="price" />
     </body>
     <script type="text/javascript">
    
     function keyup(){ 
         var quantity = document.getElementById("quantity").value;
         if(isNaN(quantity) ||  parseInt(quantity)!=quantity || parseInt(quantity)<1){ 
             quantity = 1;
             return;
         }
         if(quantity>=10){ 
             document.getElementById("quantity").value=quantity.substring(0,quantity.length-1);
             alert("商品数量不能大于10");
         }
     }  
     
    
     function numAdd(){ 
         var quantity = document.getElementById("quantity").value;
         var num_add = parseInt(quantity)+1;
         var price=document.getElementById("price").value;
         if(quantity==""){ 
             num_add = 1;
         }
         if(num_add>=10){ 
             document.getElementById("quantity").value=num_add-1;
             alert("商品数量不能大于10");
         }else{ 
             document.getElementById("quantity").value=num_add;
             var Num=price*num_add;
             document.getElementById("totalPrice").innerHTML=Num.toFixed(2);
         }
     }
     /*商品数量-1*/
     function numDec(){ 
         var quantity = document.getElementById("quantity").value;
         var price=document.getElementById("price").value;
         var num_dec = parseInt(quantity)-1;
         if(num_dec>0){ 
             document.getElementById("quantity").value=num_dec;
             var Num=price*num_dec;
              document.getElementById("totalPrice").innerHTML=Num.toFixed(2);
         }
     }
    
     </script>  
     </html>

![在这里插入图片描述][20200530164225553.gif]

[20200530164107562.png]: https://img-blog.csdnimg.cn/20200530164107562.png
[20200530164225553.gif]: https://img-blog.csdnimg.cn/20200530164225553.gif