JS基础项目全栈（购物车）ES5

最新推荐文章于 2024-10-09 11:19:11 发布
Futuregeneratio
最新推荐文章于 2024-10-09 11:19:11 发布
阅读量154
点赞数 3
文章标签： javascript css html5 css3 html vscode 前端
本文链接：https://blog.csdn.net/Futuregeneratio/article/details/141810028
版权
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
      }
      body {
        background: #ea4335;
      }
      .main {
        width: 800px;
        margin: auto;
        margin-top: 20px;
      }
      .top {
        background: #fff;
        padding: 10px;
      }
      .ipt {
        width: 230px;
        height: 32px;
        line-height: 32px;
        border: 1px solid #ccc;
      }
      .btn {
        height: 34px;
        width: 120px;
        border: none;
      }

      .cart {
        background: #fff;
        margin-top: 20px;
        padding: 10px;
      }
      .cart .tr {
        height: 35px;
      }
      .cart .tr div {
        float: left;
        line-height: 35px;
      }
      .cart .tr {
        padding: 5px 0px;
        border-bottom: 1px solid #ccc;
      }
      .cart .tr {
        clear: both;
      }
      .cart .tr div:nth-child(1) {
        width: 20%;
      }
      .cart .tr div:nth-child(2) {
        width: 20%;
      }
      .cart .tr div:nth-child(3) {
        width: 20%;
      }
      .cart .tr div:nth-child(4) {
        width: 30%;
      }
      .cart .tr div:nth-child(5) {
        width: 10%;
      }
      .cart .tr input {
        width: 50px;
      }

      .footer {
        background: #fff;
        margin-top: 20px;
        padding: 10px;
      }
      #amount {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="top">
        商品名称：<input type="text" name="" value="" id="title" class="ipt" />
         商品价格：<input type="text" name="" value="" id="price" class="ipt" />
        <input type="button" value="加入购物车" class="btn" id="addcart" />
      </div>
      <div class="cart">
        <div class="tr">
          <div><input type="checkbox" name="" value="" id="selectAll" /> 全选按钮</div>
          <div>商品名称</div>
          <div>商品价格</div>
          <div>数量</div>
          <div>操作</div>
        </div>
        <div id="goods">
          <!-- <div class="tr" id="1655771835688">
            <div><input type="checkbox" name="ckboxs" value="1655771835688" /></div>
            <div>鼠标</div>
            <div>100元</div>
            <div>
              <a href="javascript:;" name="-">-</a>
              <input type="text" value="1" readonly="" />
              <a href="javascript:;" name="+">+</a>
            </div>
            <div><a href="javascript:;" name="del">删除</a></div>
          </div> -->
        </div>
      </div>
      <div class="footer">
        总共<span id="count">0</span>件商品,
        共计 <span id="amount">0</span> 元
        <a href="javascript:;" class="r" id="delall">清空购物车</a>
      </div>
    </div>
    <!-- <script src="./购物车（es6）.js"></script> -->
    <!-- <script src="./购物车（es5）.js"></script> -->
    <script src="./购物车es6new.js"></script>
    <!-- <script src="./购物车es5new.js"></script> -->
  </body>
</html>




// es5 实现逻辑：针对某一个功能，具体去实现
// 自己去获取dom，自己去修改dom的内容，再去写入到dom
let title = document.getElementById("title");
let price = document.getElementById("price");
let addcart = document.getElementById("addcart");
let goods = document.getElementById("goods");
let selectAll = document.getElementById("selectAll");
let delall = document.getElementById("delall");
// 添加购物车
addcart.addEventListener("click", render);
function render() {
  //   console.log(isNaN("123"));
  let titleValue = title.value;
  let priceValue = price.value;
  if (titleValue == "" || priceValue == "") {
    return;
  } else if (isNaN(priceValue)) {
    alert("价格应该是数值");
  } else {
    let str = `
    <div class="tr" id="1655771835688">
    <div><input type="checkbox" name="ckboxs" value="1655771835688" /></div>
    <div>${titleValue}</div>
    <div>${priceValue}元</div>
    <div>
      <a href="javascript:;" name="-">-</a>
      <input type="text" value="1" readonly="" />
      <a href="javascript:;" name="+">+</a>
    </div>
    <div><a href="javascript:;" name="del">删除</a></div>
  </div>
    `;
    goods.insertAdjacentHTML("beforeend", str);
    // 清空输入框
    document.getElementById("title").value = "";
    document.getElementById("price").value = "";
    // 统计数量及价格
    countAndAmount();
  }

  //    console.log(titleValue,priceValue);
}
// 监听goods的点击事件
goods.addEventListener("click", goodsFun);
function goodsFun(e) {
  switch (e.target.name) {
    case "del":
      DelFun(e.target);
      break;
    case "+":
      addNum(e.target);
      break;
    case "-":
      reduceNum(e.target);
      break;
    case "ckboxs":
      ckboxsFun(e.target);
      break;
  }
}
// 删除的回调
function DelFun(item) {
  // confirm('你确定要删除')
  let tr = item.parentNode.parentNode;
  tr.parentNode.removeChild(tr);
  //统计数量及价格
  countAndAmount();
}
// +的回调
function addNum(item) {
  let num = item.previousElementSibling.value;
  num++;
  item.previousElementSibling.value = num;
  //统计数量及价格
  countAndAmount();
}
// -的回调
function reduceNum(item) {
  let num = item.nextElementSibling.value;
  if (num > 1) {
    num--;
  } else {
    // DelFun(item);
  }
  item.nextElementSibling.value = num;
  //统计数量及价格
  countAndAmount();
}
// 单选框的回调
function ckboxsFun() {
  selectAll.checked = true;
  let ckboxsAll = document.getElementsByName("ckboxs");
  for (let i = 0; i < ckboxsAll.length; i++) {
    let isChecked = ckboxsAll[i].checked;
    if (!isChecked) {
      selectAll.checked = false;
    }
  }
  //统计数量和价格
  countAndAmount();
}
// 全选框的回调
selectAll.addEventListener("click", selectAllFun);
function selectAllFun() {
  let ckboxsAll = document.getElementsByName("ckboxs");
  for (let i = 0; i < ckboxsAll.length; i++) {
    ckboxsAll[i].checked = selectAll.checked;
  }
  //统计数量及价格
  countAndAmount();
}
// 清空购物车
delall.addEventListener("click", delallFun);
function delallFun() {
  goods.innerHTML = "";
  selectAll.checked=false
  //统计数量及价格
  countAndAmount();
}
// 统计数量及总价的回调
function countAndAmount() {
  let countElement = document.getElementById("count");
  let amountElement = document.getElementById("amount");
  let count = 0;
  let amount = 0;
  for (let i = 0; i < goods.children.length; i++) {
    let isChecked = goods.children[i].children[0].children[0].checked;
    if (isChecked) {
      let num = +goods.children[i].children[3].children[1].value;
      let price = goods.children[i].children[2].innerHTML;
      price = parseFloat(price);
      count += num;
      amount += num * price;
    }
  }
  countElement.innerHTML = count;
  amountElement.innerHTML = amount;
}
countAndAmount();