zoukankan      html  css  js  c++  java
  • javascript 实现购物车页面

    (2020-09-10更新:修复发现的bug,优化代码)

    跟商城有关系的网站,难免会有购物车的结账界面。

    我用javascript实现了增加数量/减少数量,实时计算总金额,删除该商品,选中商品/反选商品/全选/全反选...的操作。

    欢迎指点!~

    图片没有提供,建议自己替换。

    效果如图:



    用到的素材:加号 减号 商品图 删除图标 选中的图标和没选中的图标


    代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
      <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>document</title>
        <style>
          * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 16px;
            font-family: 'arial';
            font-weight: normal;
          }
    
          table {
            width: 1020px;
            margin: 0 auto;
            border: 1px solid gray;
            margin-top: 30px;
            border-collapse: collapse;
            text-align: center;
          }
          table tr {
            height: 100px;
            line-height: 100px;
          }
          table th:nth-child(1) {
            width: 72px;
          }
          table th:nth-child(2) {
            width: 357px;
          }
          table th:nth-child(3) {
            width: 133px;
          }
          table th:nth-child(4) {
            width: 153px;
          }
          table th:nth-child(5),
          table th:nth-child(6) {
            width: 152px;
          }
    
          thead {
            background: black;
            color: white;
          }
          thead tr,
          tfoot tr {
            height: 40px;
            line-height: 40px;
          }
    
          tbody tr {
            border-bottom: 1px solid black;
          }
    
          table img {
            float: left;
            width: 65px;
            height: 65px;
            margin-top: 18px;
          }
          table input[type='checkbox'] {
            width: 32px;
            height: 32px;
            -webkit-appearance: none;
            background: url(./cart/checkbox.png) no-repeat center center;
            vertical-align: middle;
          }
          input[type='checkbox']:checked {
            background: url(./cart/check.png) no-repeat center center;
          }
    
          table .add,
          table .dec,
          table .del {
            display: inline-block;
            width: 14px;
            height: 21px;
            cursor: pointer;
          }
          table .add {
            background: url(./cart/add.png) no-repeat center center;
          }
          table .dec {
            background: url(./cart/dec.png) no-repeat center center;
          }
          table .del {
            width: 18px;
            background: url(./cart/del.png) no-repeat;
          }
          table .num {
            display: inline-block;
            width: 57px;
            margin: 0 18px;
            height: 39px;
            line-height: 39px;
            border: 1px solid #b0b0b0;
            background: #d4d4d4;
          }
          table .money,
          table .total {
            color: red;
          }
          table .choosen {
            color: #3083ff;
          }
          table .sure {
            width: 100%;
            height: 100%;
            background: #3083ff;
            color: #fff;
            border: none;
            cursor: pointer;
          }
        </style>
      </head>
      <body onselectstart="return false;" style="-moz-user-select: none">
        <table>
          <thead>
            <tr>
              <th><input type="checkbox" /></th>
              <th>商品信息</th>
              <th>数量</th>
              <th>单价<span>(元)</span></th>
              <th>金额<span>(元)</span></th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" /></td>
              <td>
                <img src="./cart/good.png" />
                <p>小呀小苹果(一)</p>
              </td>
              <td>
                <span class="add"></span>
                <span class="num">3</span>
                <span class="dec"></span>
              </td>
              <td class="per"><span>1900</span></td>
              <td class="money"><span>3800</span></td>
              <td><a class="del"></a></td>
            </tr>
            <tr>
              <td><input type="checkbox" /></td>
              <td>
                <img src="./cart/good.png" />
                <p>小呀小苹果(二)</p>
              </td>
              <td>
                <span class="add"></span>
                <span class="num">3</span>
                <span class="dec"></span>
              </td>
              <td class="per"><span>1900</span></td>
              <td class="money"><span>3800</span></td>
              <td><a class="del"></a></td>
            </tr>
            <tr>
              <td><input type="checkbox" /></td>
              <td>
                <img src="./cart/good.png" />
                <p>小呀小苹果(三)</p>
              </td>
              <td>
                <span class="add"></span>
                <span class="num">3</span>
                <span class="dec"></span>
              </td>
              <td class="per"><span>1900</span></td>
              <td class="money"><span>3800</span></td>
              <td><a class="del"></a></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td></td>
              <td>
                已选:<span class="choosen">0</span>&nbsp;&nbsp;<span class="total">0</span></td>
              <td></td>
              <td></td>
              <td></td>
              <td><button class="sure">结账</button></td>
            </tr>
          </tfoot>
        </table>
    
        <script>
          window.onload = function () {
            var oListNumber = document.getElementsByClassName('add').length
            var oAdds = document.getElementsByClassName('add')
            var oDecs = document.getElementsByClassName('dec')
            var oDels = document.getElementsByClassName('del')
            var oInputs = document.getElementsByTagName('input')
            var oAllChecked = false //全选
            var othercheckbox = 0 //除了全选以外的其他checkbox
    
            changeMoney()
    
            // checkbox点击事件
            for (var i = 0; i < oInputs.length; i++) {
              oInputs[i].onclick = function () {
                // 判断除了全选以外的checkbox
                if (i != 0) {
                  if (this.checked == true) {
                    othercheckbox++
                  } else {
                    othercheckbox--
                  }
                }
                // 判断是否全选
                if (othercheckbox == oListNumber) {
                  oInputs[0].checked = true
                } else {
                  oInputs[0].checked = false
                }
                // 判断是否选择了全选checkbox
                if (i == 0) {
                  oAllChecked = !oAllChecked
                  for (var j = 0; j < oInputs.length; j++) {
                    oInputs[j].checked = oAllChecked
                  }
                  if (oAllChecked) {
                    othercheckbox = oListNumber
                  } else {
                    othercheckbox = 0
                  }
                }
                changeTotal()
              }
            }
    
            // add事件
            for (var i = 0; i < oAdds.length; i++) {
              oAdds[i].onclick = function () {
                this.nextElementSibling.innerText =
                  parseInt(this.nextElementSibling.innerText) + 1
                changeMoney()
                changeTotal()
              }
            }
    
            // dec事件
            for (var i = 0; i < oDecs.length; i++) {
              oDecs[i].onclick = function () {
                if (this.previousElementSibling.innerText != '0') {
                  this.previousElementSibling.innerText =
                    parseInt(this.previousElementSibling.innerText) - 1
                }
                changeMoney()
                changeTotal()
              }
            }
    
            // add事件和dec事件伴随的金额改变事件
            function changeMoney() {
              var oListNumber = document.getElementsByClassName('add').length
              var oNums = document.getElementsByClassName('num')
              var oMoneys = document.getElementsByClassName('money')
              var oPers = document.getElementsByClassName('per')
              var oPerSpan = [] //单价
              var oMoneySpan = [] //金额
              for (var i = 0; i < oListNumber; i++) {
                oPerSpan[i] = oPers[i].getElementsByTagName('span')[0].innerText
                oMoneySpan[i] = oMoneys[i].getElementsByTagName('span')[0]
                oMoneySpan[i].innerText =
                  parseInt(oNums[i].innerText) * parseInt(oPerSpan[i])
              }
            }
    
            // del事件
            for (var i = 0; i < oDels.length; i++) {
              oDels[i].onclick = function () {
                var thisdom = this.parentNode.parentNode
                var tbody = thisdom.parentNode
                tbody.removeChild(thisdom)
                changeTotal()
              }
            }
    
            // 总数量 总金额
            function changeTotal() {
              var oNums = document.getElementsByClassName('num')
              var oInputs = document.getElementsByTagName('input')
              var oMoneys = document.getElementsByClassName('money')
              var oChoosen = document.getElementsByClassName('choosen')[0]
              var oTotal = document.getElementsByClassName('total')[0]
              var sumNUM = 0
              var sumTOTAL = 0
    
              for (var i = 1; i < oInputs.length; i++) {
                if (oInputs[i].checked) {
                  sumNUM = parseInt(oNums[i - 1].innerText) + parseInt(sumNUM)
                  sumTOTAL =
                    parseInt(
                      oMoneys[i - 1].getElementsByTagName('span')[0].innerText
                    ) + parseInt(sumTOTAL)
                }
              }
    
              oChoosen.innerText = sumNUM
              oTotal.innerText = sumTOTAL
            }
          }
        </script>
      </body>
    </html>
  • 相关阅读:
    实用机器学习 跟李沐学AI
    Explicitly drop temp table or let SQL Server handle it
    dotnettransformxdt and FatAntelope
    QQ拼音输入法 禁用模糊音
    (技术八卦)Java VS RoR
    Ruby on rails开发从头来(windows)(七)创建在线购物页面
    Ruby on rails开发从头来(windows)(十三)订单(Order)
    Ruby on rails开发从头来(windows)(十一)订单(Order)
    新员工自缢身亡,华为又站到了风口浪尖
    死亡汽油弹(Napalm Death)乐队的视频和来中国演出的消息
  • 原文地址:https://www.cnblogs.com/hiuman/p/7347386.html
Copyright © 2011-2022 走看看