首頁 > 文章 > web前端 > 以JavaScript實現簡易的購物車實例分享

以JavaScript實現簡易的購物車實例分享

小云云原創: 2018-01-05 13:53:263106瀏覽

本文主要介紹了用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>

<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時做的,比較簡單,但基本功能還是有的:

可以全選,單一選擇.
可以單一的刪除,刪除選取項目.
總計可以根據數量的變化而變化.

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

如果有問題的話,可以隨時交流... (過兩天會用jQury在做一個購物車的例子)

以JavaScript實現簡易的購物車實例分享

相關文章