如何使用JavaScript做簡易的購物車

這篇文章將為大家詳細講解有關如何使用JavaScript做簡易的購物車，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

css

<style>
  table{
   text-align: center;

  }
  table img{
   width: 50px;
  }
 a {
  text-decoration: none;
  color: red;
}
 </style>

body

<table border="1" cellspacing="0">
  <thead>
  <tr>
   <th>全選 <input type="checkbox" id="ckAll"/></th>
   <th>商品</th>
   <th>單價</th>
   <th>數量</th>
   <th>操作</th>
  </tr>
  </thead>
  <tbody>
   <tr>
    <td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/1.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="2"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a></td>
   </tr>
   <tr><td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/2.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="3"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a></td>


   </tr>
   <tr><td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/3.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="1"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a></td>


   </tr></tbody>
  <tfoot>
  <tr>
   <td colspan="3" align="right">總價:</td>
   <td colspan="2"></td>
  </tr>
  </tfoot>

 </table>
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dels">刪除選中項</a>

js

<script>
  window.onload=function(){
   document.getElementById("ckAll").onclick=function(){//當點擊全選的復合框時觸發事件
    var cks = document.getElementsByName("ck");//獲取ck對象
    for(var i=0;i<cks.length;i++){ //循環得到單個tr
     cks[i].checked=this.checked; //得到的每個tr的點擊都等于ckAll的點擊
    }
   }
   var cks = document.getElementsByName("ck");//創建ck對象
   for(var i=0;i<cks.length;i++){ //循環得到單個tr
    cks[i].onclick=function(){ // 當點擊每個當tr的時候都會觸發點擊事件
      for(var i=0;i<cks.length;i++){// 循環得到單個td
       if(!cks[i].checked){ //如果單個特點的點擊等于false 就返回
        document.getElementById("ckAll").checked = false;//那么ckAll就等于false
        return;
       }
      }
     document.getElementById("ckAll").checked = true;//否則就等于true 說明為全選狀態
    }
   }
   getSum();
    function getSum(){ //計算的方法
     var tbody = document.getElementsByTagName("tbody")[0];//創建tbody對象
     var sum =0;//先定義sum為0
      for(var i =0;i<tbody.children.length;i++){ //循環得到tr
       var tr = tbody.children[i]; //tbody中的子節點就是tr
       var td = tr.children; //tr的子節點是 td
       var price = parseFloat(td[2].innerText);//td的第二列是價格 得到價格
       var count = parseFloat(td[3].children[0].value); //第三列是數量
       sum+=price*count; //總和就等于價格*數量
       td[3].children[0].onblur=function(){ //當失去焦點的時候觸發事件
        getSum();
       }
      }
     var tfoot = document.getElementsByTagName("tfoot")[0]; //創景tfoot對象
     tfoot.children[0].children[1].innerHTML =sum; //tfootd子節點 等于總和
    }

   var dels = document.getElementsByClassName("del");//創建del對象
   for(var i = 0;i<dels.length;i++){//循環得到
    dels[i].onclick=function(){
     this.parentNode.parentNode.remove();
     getSum();
    }
   }
   document.getElementsByClassName("dels")[0].onclick=function(){
     var cks = document.getElementsByName("ck");
    for(var i = cks.length-1;i>=0;i--){
      if(cks[i].checked){
       cks[i].parentNode.parentNode.remove();
      }
    }
    getSum();

   }

  }
</script>

效果圖

這個購物車是在學習js時做的,比較簡單,但基本功能還是有的:

1. 可以全選,單個選擇.

2. 可以單個的刪除,刪除選中項.

3. 總計可以根據數量的變化而變化.

大家用在線的編輯器查看一下效果會更好.

關于“如何使用JavaScript做簡易的購物車”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。