집 >웹 프론트엔드 >JS 튜토리얼 >Taobao와 유사한 장바구니 효과를 구현하기 위해 JavaScript를 사용한 예제 코드 공유

Taobao와 유사한 장바구니 효과를 구현하기 위해 JavaScript를 사용한 예제 코드 공유

黄舟원래의: 2017-03-17 15:03:391943검색

본 글에서는 장바구니 특수 효과를 구현하기 위한 자바스크립트 관련 정보를 주로 소개하며, 자바스크립트를 사용하여 제품과 유사한 단일 선택, 전체 선택, 삭제를 구현하는 방법을 샘플 코드를 통해 자세히 소개합니다. 타오바오 장바구니, 수정 및 기타 기능이 필요한 친구가 참조할 수 있습니다. 아래를 살펴보겠습니다.

머리말

e-commerce.com에서 제품을 구매할 때마다 어떤 제품을 구매하든 장바구니 기능은 누구나 익숙하실 것입니다. 마음에 드는 상품이 장바구니에 추가되어 최종적으로 결제됩니다. 장바구니 기능을 통해 소비자는 상품을 추가하고, 삭제할 수 있으며, 장바구니에 있는 하나 이상의 상품을 선택할 수 있으며, 상품의 최종 총 가격도 소비자의 작업에 따라 변경됩니다. 이 기사에서는 단일 선택, 전체 선택, 삭제, 수량 수정, 가격 계산, 수량 계산, 미리보기 및 기타 제품 기능을 포함하여 Taobao와 유사한 장바구니 효과를 달성하기 위해 Javascript를 사용하는 방법을 소개합니다.

함수는 다음과 같습니다

1. IE 하위 버전과 호환되는 getElementsByClassName() 메소드 구현

2 . JS 테이블 작업

3. parseInt() 및 parseFloat()을 사용하여 문자열 을 숫자

로 변환합니다. 4. toFixed() 숫자를 지정된 10진수 자릿수로 형식 지정

5. 이벤트프록시

사용:

Taobao와 유사한 장바구니 효과를 구현하기 위해 JavaScript를 사용한 예제 코드 공유

border-collapse에는 두 가지 값, 즉 테두리 병합과 분리라는 두 가지 값이 있습니다. 분리된 테두리에서 간격과 분리를 설정할 수 있습니다. 테두리 스타일

border-spacing:2em 4em; (올바른 간격 및 하단 간격 설정)

border-style:none 실선 점선 스타일 설정; 상단, 오른쪽, 하단 및 왼쪽 각각)

html 구조:

<table id="cartTable">
 <thead>
 <tr>
 <th><label><input class="check-all check" type="checkbox"/> 全选</label></th>
 <th>商品</th>
 <th>单价</th>
 <th>数量</th>
 <th>小计</th>
 <th>操作</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
 <td class="goods"><img src="images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
 <td class="price">5999.88</td>
 <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/>
 <span class="add">+</span></td>
 <td class="subtotal">5999.88</td>
 <td class="operation"><span class="delete">删除</span></td>
 </tr>
 <tr>
 <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
 <td class="goods"><img src="images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
 <td class="price">3888.50</td>
 <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/>
 <span class="add">+</span></td>
 <td class="subtotal">3888.50</td>
 <td class="operation"><span class="delete">删除</span></td>
 </tr>
 <tr>
 <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
 <td class="goods"><img src="images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
 <td class="price">1428.50</td>
 <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/>
 <span class="add">+</span></td>
 <td class="subtotal">1428.50</td>
 <td class="operation"><span class="delete">删除</span></td>
 </tr>
 <tr>
 <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
 <td class="goods"><img src="images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
 <td class="price">640.60</td>
 <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/>
 <span class="add">+</span></td>
 <td class="subtotal">640.60</td>
 <td class="operation"><span class="delete">删除</span></td>
 </tr>
 </tbody>
</table>
<p class="foot" id="foot">
 <label class=" fl select-all"><input type="checkbox" class="check-all check" /> 全选</label>
 <a class="fl delete" id="deleteAll" href="javascript:;" rel="external nofollow" >删除</a>
 <p class="fr closing">结 算</p>
 <p class="fr total">合计：￥<span id="priceTotal">0.00</span></p>
 <p class="fr select" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></p>
 <p class="selected-view">
 <p id="selectedViewList" class="clearfix">
 <p><img src="images/1.jpg"><span>取消选择</span></p>
 </p>
 <span class="arrow">◆<span>◆</span></span>
 </p>
</p>

css 코드:

*{
 margin: 0;
 padding: 0;
 }
 a{
 color: #666;
 text-decoration: none;
 }
 body{
 padding:20px;
 color: #666;
 }
 .fl{
 float: left;
 }
 .fr{
 float: right;
 }
 table{
 border-collapse: collapse;
 border-spacing: 0;
 border: 0;
 text-align: center;
 width: 937px;
 }
 th,td{
 border: 1px solid #cadeff;
 }
 th{
 background: #e2f2ff;
 border-top: 3px solid #a7cbff;
 height: 30px;
 }
 td{
 padding: 10px;
 color: #444;
 }
 tbody tr:hover{
 background: RGB(238,246,255);
 }
 .checkbox{width: 60px;}
 .goods{width: 300px;}
 .goods span{
 width: 180px;
 margin-top: 20px;
 text-align: left;
 float: left;
 }
 .price{width: 130px;}
 .count{width: 90px;}
 .count .add, .count input, .count .reduce{
 float: left;
 margin-left: -1px;
 position: relative;
 z-index: 0;
 }
 .count .add, .count .reduce{
 height: 23px;
 width: 17px;
 border: 1px solid #e5e5e5;
 background: #f0f0f0;
 text-align: center;
 line-height: 23px;
 color: #444;
 }
 .count .add:hover, .count .reduce:hover{
 color: #f50;
 z-index: 3;
 border-color: #f60;
 cursor: pointer;
 }
 .count input{
 width: 50px;
 height: 15px;
 line-height: 15px;
 border: 1px solid #aaa;
 color: #343434;
 text-align: center;
 padding: 4px 0;
 background-color: #fff;
 z-index: 2;
 }
 .subtotal{
 width: 150px;
 color: red;
 font-weight: bold;
 }
 .operation{width: 80px;}
 .operation span:hover, .a:hover{
 cursor: pointer;
 color: red;
 text-decoration: underline;
 }
 img{
 width: 100px;
 height: 80px;
 margin-right: 10px;
 float: left;
 }
 .foot{
 width: 935px;
 margin-top: 10px;
 color: #666;
 height: 48px;
 border: 1px solid #c8c8c8;
 background-image: linear-gradient(RGB(241,241,241),RGB(226,226,226));
 position: relative;
 z-index: 8;
 }
 .foot p, .foot a{
 line-height: 48px;
 height: 48px;
 }
 .foot .select-all{
 width: 100px;
 height: 48px;
 line-height: 48px;
 padding-left: 5px;
 color: #666;
 }
 .foot .closing{
 border-left: 1px solid #c8c8c8;
 width: 100px;
 text-align: center;
 color: #000;
 font-weight: bold;
 background: RGB(238,238,238);
 cursor: pointer;
 }
 .foot .total{
 margin: 0 20px;
 cursor: pointer;
 }
 .foot #priceTotal, .foot #selectedTotal{
 color: red;
 font-family: "微软雅黑";
 font-weight: bold;
 }
 .foot .select{
 cursor: pointer;
 }
 .foot .select .arrow{
 position: relative;
 top: -3px;
 margin-left: 3px;
 }
 .foot .select .down{
 position: relative;
 top: 3px;
 display: none;
 }
 .show .select .down{
 display: inline;
 }
 .show .select .up{
 display: none;
 }
 .foot .select:hover .arrow{
 color: red;
 }
 .foot .selected-view{
 width: 935px;
 border: 1px solid #c8c8c8;
 position: absolute;
 height: auto;
 background: #fff;
 z-index: 9;
 bottom: 48px;
 left: -1px;
 display: none;
 }
 .show .selected-view{display: block;}
 .foot .selected-view p{height: auto;}
 .foot .selected-view .arrow{
 font-size: 16px;
 line-height: 100%;
 color: #c8c8c8;
 position: absolute;
 right: 330px;
 bottom: -9px;
 }
 .foot .selected-view .arrow span{
 color: #fff;
 position: absolute;
 left: 0;
 bottom: 1px;
 }
 #selectedViewList{
 padding: 20px;
 margin-bottom: -20px;
 }
 #selectedViewList p{
 display: inline-block;
 position: relative;
 width: 100px;
 height: 80px;
 border: 1px solid #ccc;
 margin: 10px;
 }
 #selectedViewList p span{
 display: none;
 color: #fff;
 font-size: 12px;
 position: absolute;
 top: 0;
 right: 0;
 width: 60px;
 height: 18px;
 line-height: 18px;
 text-align: center;
 background: RGBA(0,0,0,.5);
 cursor: pointer;
 }
 #selectedViewList p:hover span{
 display: block;
 }

js 부분 :

1) 모든 상품을 선택하고 수량과 가격을 계산하는 기능 구현

var cartTable = document.getElementById(&#39;cartTable&#39;);
 var tr = cartTable.children[1].rows;//获取table下的tbody下的每一行
 var checkInputs = document.getElementsByClassName(&#39;check&#39;);
 var checkAllInputs = document.getElementsByClassName(&#39;check-all&#39;);
 var selectedTotal = document.getElementById(&#39;selectedTotal&#39;);
 var priceTotal = document.getElementById(&#39;priceTotal&#39;);
 //计算总数和价格
 function getTotal(){
 var selected = 0;
 var price = 0;
 for(var i=0;i < tr.length; i++){
 if(tr[i].getElementsByTagName(&#39;input&#39;)[0].checked){
  selected += parseInt(tr[i].getElementsByTagName(&#39;input&#39;)[1].value);
  price += parseFloat(tr[i].cells[4].innerHTML);//cells属性为获得tr下面的td
 }
 }
 selectedTotal.innerHTML = selected;
 priceTotal.innerHTML = price.toFixed(2);//保留两位小数
 }
 for(var i=0;i<checkInputs.length;i++){
 checkInputs[i].onclick = function(){
 if(this.className === &#39;check-all check&#39;){//如果点击的是全选按钮，则使所有按钮的状态和它相同
  for(var j=0;j<checkInputs.length;j++){
  checkInputs[j].checked = this.checked;
  }
 }
 if(this.checked == false){//如果其中一个变为未选中状态，则使全选按钮取消选中
  for(var i=0;i<checkAllInputs.length;i++){
  checkAllInputs[i].checked = false;
  }
 }
 getTotal();
 }
 }

2) 선택 클릭 제품 미리보기 플로팅 레이어 기능을 구현한 제품입니다

선택한 제품을 클릭하면 선택한 제품 목록이 나타납니다. 표시됩니다

동시에 getTotal() 함수 에 새로 생성된 p

js 코드에 추가됩니다:

function getTotal(){
 var selected = 0;
 var price = 0;
 var HTMLstr = &#39;&#39;;
 for(var i=0;i < tr.length; i++){
 if(tr[i].getElementsByTagName(&#39;input&#39;)[0].checked){
  tr[i].className = &#39;on&#39;;
  selected += parseInt(tr[i].getElementsByTagName(&#39;input&#39;)[1].value);
  price += parseFloat(tr[i].cells[4].innerHTML);//cells属性为获得tr下面的td
  HTMLstr += &#39;<p><img src="&#39;+ tr[i].getElementsByTagName(&#39;img&#39;)[0].src + &#39;"><span>取消选择</span></p>&#39;;
 }
 else{
  tr[i].className = &#39;&#39;;
 }
 }
 selectedTotal.innerHTML = selected;
 priceTotal.innerHTML = price.toFixed(2);//保留两位小数
 selectedViewList.innerHTML = HTMLstr;
 if(selected == 0){
 foot.className = &#39;foot&#39;;
 }
 }
 for(var i=0;i<checkInputs.length;i++){
 checkInputs[i].onclick = function(){
 if(this.className === &#39;check-all check&#39;){//如果点击的是全选按钮，则使所有按钮的状态和它相同
  for(var j=0;j<checkInputs.length;j++){
  checkInputs[j].checked = this.checked;
  }
 }
 if(this.checked == false){//如果其中一个变为未选中状态，则使全选按钮取消选中
  for(var i=0;i<checkAllInputs.length;i++){
  checkAllInputs[i].checked = false;
  }
 }
 getTotal();
 }
 }

 selected.onclick = function(){
 if(foot.className == &#39;foot&#39;){
 if(selectedTotal.innerHTML != 0){
  foot.className = &#39;foot show&#39;;
 }
 }else{
 foot.className = &#39;foot&#39;;
 }
 }

3) 상품 목록에서 선택 취소 및 이벤트 프록시

선택한 상품 목록에 AppendChild가 없습니다. p,span이 존재하지 않는 경우 이벤트 프록시를 사용해야 합니다.

selectedViewList.onclick = function(e){
  var el = e.srcElement;
  if(el.className == &#39;del&#39;){
  var index = el.getAttribute(&#39;index&#39;);
  var input = tr[index].getElementsByTagName(&#39;input&#39;)[0];
  input.checked = false;
  input.onclick();
  }
 }

4) 상품 수량 및 소계 가격 증감 계산 구현

//增减商品数量事件代理
 for(var i=0;i<tr.length;i++){
  tr[i].onclick = function(e){
  e = e|| window.event;
  var el = e.srcElement;
  var cls = el.className;
  var input = this.getElementsByTagName(&#39;input&#39;)[1];
  var val = parseInt(input.value);
  var reduce = this.getElementsByTagName(&#39;span&#39;)[1];
  switch (cls){
   case &#39;add&#39;:
   input.value = val + 1;
   reduce.innerHTML = &#39;-&#39;;
    getsubTotal(this);
   break;
   case &#39;reduce&#39;:
   if(val > 1){
    input.value = val - 1;
    getsubTotal(this);
   }else{
    reduce.innerHTML = &#39;&#39;;
   }
  }
  getTotal();
  }
  tr[i].getElementsByTagName(&#39;input&#39;)[1].onkeyup = function(){
  var val = parseInt(this.value);
  var tr = this.parentNode.parentNode;//this指的是当前的input，其父节点的父节点就是当前的tr
  var reduce = tr.getElementsByTagName(&#39;span&#39;)[1];
  if(isNaN(val) || val < 1){
   val = 1;
  }
  this.value = val;//保证输入框中都是大于1的纯数字
  if(val <= 1){
   reduce.innerHTML = &#39;&#39;;
  }
  else{
   reduce.innerHTML = &#39;-&#39;;
  }
  getsubTotal(tr);
  getTotal();
  }
 }

5) 상품 삭제 기능 구현

배열에서 일부 데이터를 삭제할 때 for 루프를 사용하여 아래 첨자 i를 재설정하는 방법을 알아보세요.

아아아앙

요약

위 내용은 Taobao와 유사한 장바구니 효과를 구현하기 위해 JavaScript를 사용한 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript는 왼쪽 및 오른쪽 원활한 스크롤 그림 효과 사례를 구현합니다.다음 기사：JavaScript는 왼쪽 및 오른쪽 원활한 스크롤 그림 효과 사례를 구현합니다.