简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JS는 장바구니 특수 효과를 구현합니다.

高洛峰
풀어 주다： 2017-02-04 13:27:17
원래의
1067명이 탐색했습니다.

효과:

1. 모두 선택 버튼을 클릭하면 모두 선택되고, 다시 클릭하면 모두 선택 해제됩니다.

2. 수량 ' + ' - '를 클릭하면 자동 계산됩니다. 그리고 총계는 계속 업데이트됩니다. 수량이 1보다 큰 경우 '-'가 나타납니다. 1보다 작거나 같으면 '-'가 사라집니다

3. 삭제를 클릭하면 삭제 기능이 활성화됩니다.

4. 모두 선택 옆에 있는 삭제 버튼을 클릭하면 모두 삭제됩니다.

5. 상품 선택 후, 해당 상품을 클릭하면 해당 상품이 표시됩니다.

6. 선택한 상품은 선택 해제가 가능합니다. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
</head>
<style type="text/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-right: -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;
  /*border: 1px solid #ccc;*/
  margin-right: 10px;
  float: left;
}
 
.foot {
  width: 935px;
  margin-top: 10px;
  color: #666;
  height: 48px;
  border: 1px solid #c8c8c8;
  background-color: #eaeaea;
  background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
  position: relative;
  z-index: 8;
}
.foot div, .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: "Microsoft Yahei";
  font-weight: bold;
}
.foot .selected {
  cursor: pointer;
}
.foot .selected .arrow {
  position: relative;
  top:-3px;
  margin-left: 3px;
}
.foot .selected .down {
  position: relative;
  top:3px;
  display: none;
}
 .show .selected .down {
  display: inline;
}
 .show .selected .up {
  display: none;
}
.foot .selected:hover .arrow {
  color: red;
}
.foot .selected-view {
  width: 935px;
  border: 1px solid #c8c8c8;
  position: absolute;
  height: auto;
  background: #ffffff;
  z-index: 9;
  bottom: 48px;
  left: -1px;
  display:none;
}
.show .selected-view {
  display: block;
}
.foot .selected-view div{
  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: #ffffff;
  position: absolute;
  left: 0px;
  bottom: 1px;
}
#selectedViewList {
  padding: 20px;
  margin-bottom: -20px;
}
#selectedViewList div{
  display: inline-block;
  position: relative;
  width: 100px;
  height: 80px;
  border: 1px solid #ccc;
  margin: 10px;
}
#selectedViewList div span {
  display: none;
  color: #ffffff;
  font-size: 12px;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 60px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: RGBA(0,0,0,.5);
  cursor: pointer;
}
#selectedViewList div:hover span {
  display: block;
}
</style>
<body>
<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="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704loo2mdzuux5123gu.jpg.editor.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="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704m26zvv6e52sjczee.jpg.editor.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="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704etdabo2fpppdplsa.jpg.editor.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="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075823wdtw1pdvf3wbwd8b.jpg.editor.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>
<div 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:;">删除</a>
  <div class="fr closing">结 算</div>
  <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
  <div class="fr selected" id="selected">已选商品
    <span id="selectedTotal">0</span>件
    <span class="arrow up">︽</span>
    <span class="arrow down">︾</span>
  </div>
  <div class="selected-view">
    <div id="selectedViewList" class="clearfix">
      <!--<div><img src="images/1.jpg"><span>取消选择</span></div>-->
    </div>
    <span class="arrow">◆<span>◆</span></span>
  </div>
</div>
<script>
window.onload = function () {
  if (!document.getElementsByClassName) {
    document.getElementsByClassName = function (cls) {
      var ret = [];
      var els = document.getElementsByTagName(&#39;*&#39;);
      for (var i = 0, len = els.length; i < len; i++) {
        if (els[i].className === cls
          || els[i].className.indexOf(cls + &#39; &#39;) >= 0
          || els[i].className.indexOf(&#39; &#39; + cls + &#39; &#39;) >= 0
          || els[i].className.indexOf(&#39; &#39; + cls) >= 0) {
          ret.push(els[i]);
        }
      }
      return ret;
    }
  }
  var cartTable = document.getElementById(&#39;cartTable&#39;);
  var tr = cartTable.children[1].rows;
  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;);
  var selected = document.getElementById(&#39;selected&#39;);
  var foot = document.getElementById(&#39;foot&#39;);
  var selectedViewList = document.getElementById(&#39;selectedViewList&#39;);
  var deleteAll = document.getElementById(&#39;deleteAll&#39;);
  //计算
  function getTotal() {
    var seleted = 0;
    var price = 0;
    var HTMLstr = &#39;&#39;;
    for (var i = 0, len = tr.length; i < len; i++) {
      if (tr[i].getElementsByTagName(&#39;input&#39;)[0].checked) {
        tr[i].className = &#39;on&#39;;
        seleted += parseInt(tr[i].getElementsByTagName(&#39;input&#39;)[1].value);
        price += parseFloat(tr[i].cells[4].innerHTML);
        HTMLstr += &#39;<div><img src="&#39; + tr[i].getElementsByTagName(&#39;img&#39;)[0].src + &#39;"><span class="del" index="&#39; + i + &#39;">取消选择</span></div>&#39;
      }
      else {
        tr[i].className = &#39;&#39;;
      }
    }
    selectedTotal.innerHTML = seleted;
    priceTotal.innerHTML = price.toFixed(2);
    selectedViewList.innerHTML = HTMLstr;
 
    if (seleted == 0) {
      foot.className = &#39;foot&#39;;
    }
  }
  //小计
  function getSubTotal(tr) {
    var tds = tr.cells;
    var price = parseFloat(tds[2].innerHTML);
    var count = parseInt(tr.getElementsByTagName(&#39;input&#39;)[1].value);
    var SubTotal = parseFloat(price * count);
    tds[4].innerHTML = SubTotal.toFixed(2);
  }
  for (var i = 0 , len = checkInputs.length; i < len; 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 k = 0; k < checkAllInputs.length; k++) {
          checkAllInputs[k].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;;
    }
  }
  selectedViewList.onclick = function (e) {
    e = e || window.event;
    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();
    }
  }
  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;
          }
          if (input.value <= 1) {
            reduce.innerHTML = &#39;&#39;;
          }
          getSubTotal(this);
          break;
        case &#39;delete&#39;:
          var conf = confirm(&#39;确定要删除吗？&#39;);
          if (conf) {
            this.parentNode.removeChild(this);
          }
          break
        default :
          break;
      }
      getTotal();
    }
    tr[i].getElementsByTagName(&#39;input&#39;)[1].onkeyup = function () {
      var val = parseInt(this.value);
      var tr = this.parentNode.parentNode
      var reduce = tr.getElementsByTagName(&#39;span&#39;)[1];
      if (isNaN(val) || val < 1) {
        val = 1;
      }
      this.value = val;
      if (val <= 1) {
        reduce.innerHTML = &#39;&#39;;
      }
      else {
        reduce.innerHTML = &#39;-&#39;;
      }
      getSubTotal(tr);
      getTotal();
    }
  }
  deleteAll.onclick = function () {
    if (selectedTotal.innerHTML != &#39;0&#39;) {
      var conf = confirm(&#39;确定删除吗？&#39;);
      if (conf) {
        for (var i = 0; i < tr.length; i++) {
          var input = tr[i].getElementsByTagName(&#39;input&#39;)[0];
          if (input.checked) {
            tr[i].parentNode.removeChild(tr[i]);
            i--;
          }
        }
      }
    }
  }
  checkAllInputs[0].checked = true;
  checkAllInputs[0].onclick();
}
</script>
</body>
</html>
로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 이 글의 내용이 모든 분들의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 저도 PHP 중국어 사이트에 지원하고 싶습니다!

장바구니 특수 효과의 JS 구현과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨：
js 购物车
원천：php.cn
이전 기사：Extjs 최적화 (2) 양식 제출의 보편적 구현 다음 기사：JavaScript로 간단한 장바구니 기능 작성
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
"Cookie" 요청 헤더의 쿠키 수가 "set-cookie" 응답 헤더에 설정된 쿠키 수를 초과하는 이유는 무엇입니까? 저는 웹 크롤링의 초보자이므로 http 요청에 대한 이해가 매우 얕습니다. 장바구니에 추가와 같이 웹사이트에 보내는 특정 요청을 검사할 때 개발 도구는 해당 요청...
에서 2024-04-05 14:52:06
0
1
3571
jQuery.remove() 및 array.splice() 문제 그래서 항목 목록과 쇼핑 목록이 있는 페이지가 있습니다. 항목 목록에서 x개의 항목을 쇼핑 목록에 추가하는 경우 쇼핑 목록에서 항목을 클릭하고 해당 항목을 연 모...
에서 2024-04-04 17:21:35
0
1
347
제거된 특정 항목의 장바구니 항목 키 ID 가져오기: WooCommerce Shopping Cart WooCommerce에는 삭제된 제품(항목)이 고유한지 확인한 다음 해당 정보를 기반으로 추가 코드를 작성해야 하는 사용자 정의 cart.php 템플릿이 있습니다...
에서 2024-04-04 16:35:18
0
1
282
WooCommerce Checkout - 사용자 역할 및 장바구니 내용 확인 WooCommerce의 결제 프로세스에 문제가 있습니다. 저는 일반 제품과 B2B 제품을 구별하기 위해 "B2BforWooCommerce" 플러...
에서 2024-04-03 11:58:52
0
1
475
배송 옵션으로 지역 픽업을 선택할 때 쿠폰 사용을 피하세요 장바구니에 담거나 결제 시 '지역 픽업'을 선택할 때 할인이 추가되는 코드를 사용합니다. /***지역 픽업 할인*/add_action('woocommerce_ca...
에서 2024-04-02 17:42:54
0
1
355
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！