js实现购物车-Toy模板网

这篇具有很好参考价值的文章主要介绍了js实现购物车。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

###

嘎嘎原生，看就完了

###

html部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="common">
      <a href="javascript:;" onclick="show()">添加信息</a>
      <input type="text" value="" id="search" />
      <input type="submit" value="搜索" onclick="search()" />
      <div class="header">
        <div class="row01">
          <!--传this关键字，代表input标签对象-->
          <input type="checkbox" class="chkall" onclick="checkall(this)" />全选
        </div>
        <div class="row02">商品标题</div>
        <div class="row03">数量</div>
        .
        <div class="row04">单价(元)</div>
        <div class="row05">总价(元)</div>
        <div class="row06">操作</div>
      </div>

      <div class="goods"></div>

      <div class="header">
        <div class="row01" onclick="delall(this)">删除全部</div>
        <div class="row02"></div>
        <div class="row03"></div>
        <div class="row04">总共<b>2</b>件商品</div>
        <div class="row05">总价<span>1999.9</span>元</div>
        <div class="row06"></div>
      </div>
    </div>
    <div class="info">
      <a href="javascript:;" onclick="hide()">X</a>
      <ul>
        <li>
          <label for="">商品标题</label>
          <input type="text" id="title" value="" placeholder="请输入商品标题" />
        </li>
        <li>
          <label for="">商品数量</label>
          <input type="text" id="num" value="" placeholder="请输入商品数量" />
        </li>
        <li>
          <label for="">商品单价</label>
          <input type="text" id="price" value="" placeholder="请输入商品单价" />
        </li>
        <li>
          <label for="">&nbsp;</label>
          <input type="submit" onclick="add()" value="提交" />
        </li>
      </ul>
    </div>
    <script src="js1.js"></script>
  </body>
</html>

###

css部分

* {
  margin: 0;
  padding: 0;
}
body {
  /* position: relative; */
  height: 800px;
}
.common {
  width: 1200px;
  margin: 0 auto;
}
.header {
  background: #e3e3e3;
  height: 60px;
  line-height: 60px;
}
.row01,
.row02,
.row03,
.row04,
.row05,
.row06 {
  display: inline-block;
  width: 10%;
  text-align: center;
}
.row02 {
  width: 30%;
}
.row03 {
  width: 19%;
}
.good {
  height: 60px;
  line-height: 60px;
}
.row03 a,
.row03 input {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #e3e3e3;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  vertical-align: middle;
}
.info {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 400px;
  width: 400px;
  background-color: #e3e3e3;
  display: none;
}
.info ul {
  list-style: none;
}
.info ul li {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
}
.info ul li input {
  height: 40px;
  line-height: 40px;
  width: 220px;
  margin-top: 20px;
}
.info a {
  display: inline-block;
  float: right;
  text-align: center;
  border: 1px solid white;
  width: 30px;
  height: 30px;
}

###

js部分文章来源地址https://www.toymoban.com/news/detail-812775.html

let good =
  JSON.parse(localStorage.getItem("good")) ||
  [
    /* {
        title:'小米手机',
        num:1,
        price:1999.9,
        totalprice:1999.0,
        ischecked:''
    },
    {
        title:'红米手机',
        num:1,
        price:1999.9,
        totalprice:1999.0,
        ischecked:''
    },
    {
        title:'苹果手机',
        num:1,
        price:1999.9,
        totalprice:1999.0,
        ischecked:''
    } */
  ];

function $(selector) {
  return document.querySelector(selector);
}

function createhtml(good) {
  let html = "";
  good.forEach(function (item, index) {
    html += `<div class="good">
        <div class="row01">
            <input type="checkbox" class="chk" ${item.ischecked} onclick="chk(${index})">
        </div>
        <div class="row02">
           ${item.title}
        </div>
        <div class="row03">
            <a href="javascript:;" onclick="inc(${index})">+</a>
            <input type="text" value="${item.num}">
            <a href="javascript:;" onclick="dec(${index})">-</a>
        </div>
        <div class="row04">
            ${item.price}
        </div>
        <div class="row05">
            ${item.totalprice}
        </div>
        <div class="row06">
            <a href="javascript:;" onclick="del(${index})">删除</a>
        </div>
    </div>
        `;
  });
  total();
  $(".goods").innerHTML = html;
}
createhtml(good);

function add() {
  var title = document.querySelector("#title").value;
  var num = parseInt(document.querySelector("#num").value);
  var price = parseInt(document.querySelector("#price").value);

  if (title == "" || num == "" || price == "") {
    return false;
  }
  var obj = {
    title: title,
    num: num,
    price: parseFloat(price),
    totalprice: parseInt(num) * parseInt(price),
    idchecked: "",
  };
  good.push(obj);
  hide();
  localStorage.setItem("good", JSON.stringify(good));
  createhtml(good);
}

function show() {
  document.querySelector(".info").style.display = "block";
}
function hide() {
  document.querySelector(".info").style.display = "none";
}

function del(index) {
  good.splice(index, 1);
  createhtml(good);
  localStorage.setItem("good", JSON.stringify(good));
}

function delall() {
  for (var i = good.length - 1; i >= 0; i--) {
    if (good[i].ischecked) {
      good.splice(i, 1);
    }
  }
  localStorage.setItem("good", JSON.stringify(good));
  createhtml(good);
}

function inc(index) {
  good[index].num++;
  good[index].totalprice = (good[index].num * good[index].price).toFixed(2);
  createhtml(good);
}
function dec(index) {
  if (good[index].num <= 1) {
    return false;
  }
  good[index].num--;
  good[index].totalprice = (good[index].num * good[index].price).toFixed(2);
  createhtml(good);
}

function checkall(obj) {
  good.forEach(function (item) {
    item.ischecked = obj.checked ? "checked" : "";
  });
  createhtml(good);
}

function chk(index) {
  good[index].ischecked = good[index].ischecked ? "" : "checked";
  var istrue = good.every(function (item) {
    return item.ischecked != "";
  });
  $(".chkall").checked = istrue;
  createhtml(good);
}

function search() {
  var keyword = document.querySelector("#search").value;
  var arr = [];
  if (keyword) {
    arr = good.filter(function (item) {
      return item.title.indexOf(keyword) != -1;
    });
  } else {
    arr = good;
  }
  createhtml(arr);
}

function total() {
  var totalnum = 0,
    totalprice = 0;
  good.forEach(function (item) {
    if (item.ischecked) {
      totalnum += item.num;
      totalprice += parseFloat(item.totalprice);
    }
  });
  $(".row04 b").innerHTML = totalnum;
  $(".row05 span").innerHTML = totalprice.toFixed(2);
}

到了这里，关于js实现购物车的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！