master

分支 (1)

管理

管理

master

hrsaas-27
/
aaa.html

<!DOCTYPE html>
<html lang="en">

<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>购物车全选功能</title>
  <!-- 引入初始化 -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #666;
    }

    body {
      background: #fff;
      color: #666;
      font-size: 14px;
    }

    input {
      outline: none;
    }

    .clearfix::before,
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }
  </style>
  <!-- 引入购物车样式 -->
  <style>
    table {
      width: 800px;
      margin: 0 auto;
      border-collapse: collapse;
    }

    th {
      font: normal 14px/50px '宋体';
      color: #666;
    }

    th,
    td {
      border: none;
      text-align: center;
      border-bottom: 1px dashed #ccc;
    }

    input[type='checkbox'] {
      width: 13px;
      height: 13px;
    }

    tbody p {
      position: relative;
      bottom: 10px;
    }

    tbody .add,
    tbody .reduce {
      float: left;
      width: 20px;
      height: 20px;
      border: 1px solid #ccc;
      text-align: center;
    }

    tbody input[type='text'] {
      width: 50px;
      float: left;
      height: 18px;
      text-align: center;
    }

    tbody .count-c {
      width: 98px;
      margin: 0 auto;
    }

    .disabled {
      color: #ddd;
      cursor: not-allowed;
    }

    tbody tr:hover {
      background: rgba(241, 209, 149, 0.945);
    }

    tbody tr.active {
      background: rgba(241, 209, 149, 0.945);
    }

    .controls {
      width: 790px;
      margin: 10px auto;
      border: 1px solid #ccc;
      line-height: 50px;
      padding-left: 10px;
      position: relative;
    }

    .controls .del-all,
    .controls .clear {
      float: left;
      margin-right: 50px;
    }

    .controls p {
      float: right;
      margin-right: 100px;
    }

    .controls span {
      color: red;
    }

    .controls .pay {
      position: absolute;
      right: 0;
      width: 80px;
      height: 54px;
      background: red;
      font: bold 20px/54px '宋体';
      color: #fff;
      text-align: center;
      bottom: -1px;
    }

    .controls .total-price {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="car">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="all" />
            全选
          </th>
          <th>商品</th>
          <th>单价</th>
          <th>商品数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="carBody">
        <tr>
          <td>
            <input class="s_ck" type="checkbox" readonly />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">5￥</td>
          <td>
            <div class="count-c clearfix">
              <a href=" " class="reduce disabled">-</a>
              <input type="text" value="1" />
              <a href="javascript:" class="add">+</a>
            </div>
          </td>
          <td class="total">5￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">10￥</td>
          <td>
            <div class="count-c clearfix">
              <a href="javascript:" class="reduce">-</a>
              <input type="text" readonly value="2" />
              <a href="javascript:" class="add">+</a>
            </div>
          </td>
          <td class="total">20￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">20￥</td>
          <td>
            <div class="count-c clearfix">
              <a href="javascript:" class="reduce">-</a>
              <input type="text" readonly value="2" />
              <a href="javascript:" class="add">+</a>
            </div>
          </td>
          <td class="total">40￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">35￥</td>
          <td>
            <div class="count-c clearfix">
              <a href="javascript:" class="reduce">-</a>
              <input type="text" readonly value="2" />
              <a href="javascript:" class="add">+</a>
            </div>
          </td>
          <td class="total">70￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="controls clearfix">
      <a href="javascript:" class="del-all">删除所选商品</a>
      <a href="javascript:" class="clear">清理购物车</a>
      <a href="javascript:" class="pay">去结算</a>
      <p>
        已经选中
        <span id="totalCount">0</span>
        件商品;总价：
        <span id="totalPrice" class="total-price">0￥</span>
      </p>
    </div>
  </div>
  <script>
    // // 需求: 实现全选功能, 实现增减功能, 实现计算单价功能(练习标签关系查找)
    var add = document.querySelectorAll('.add');
    var reduce = document.querySelectorAll('.reduce');
    var all = document.querySelector('#all');
    var s_ck = document.querySelectorAll('.s_ck');
    var price = document.querySelectorAll('.price');
    var total = document.querySelectorAll('.total');
    var txt = document.querySelectorAll('.count-c>input[type=text]');
    // 大的影响小的
    all.onclick = function () {
      for (let i = 0; i < s_ck.length; i++) {
        s_ck[i].checked = all.checked;
      }
    };
    // 小的影响大的
    for (let i = 0; i < s_ck.length; i++) {
      s_ck[i].onclick = function () {
        let k;
        for (let j = 0; j < s_ck.length; j++) {
          if (s_ck[j].checked == false) {
            k = false;
          }
        }
        all.checked = k == false ? false : true;
      };
    }
    // 增减功能
    // 加号功能
    for (let i = 0; i < add.length; i++) {
      add[i].onclick = function () {
        k = txt[i].value;
        ++k;
        txt[i].value = k;
        p = price[i].innerHTML;
        t = p.slice(0, 2);
        total[i].innerHTML = t * txt[i].value + '¥';
        console.log(total[i].innerHTML);
      };
    }
    // 减号功能
    for (let i = 0; i < reduce.length; i++) {
      reduce[i].onclick = function () {
        if (txt[i].value == 0) {
          reduce[i].disabled = true;
        } else {
          reduce[i].disabled = false;
          k = txt[i].value;
          --k;
          txt[i].value = k;
          p = price[i].innerHTML;
          t = p.slice(0, 2);
          total[i].innerHTML = t * txt[i].value + '¥';
        }
      };
    }
      //  计算单价
  </script>
</body>

</html>