备案控制台
开发者社区 开发与运维 文章 正文

基础购物车功能

2024-04-18 10
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 基础购物车功能

今天给大家做个简单的购物车，这个功能主要九个事件组成，加号点击事件、减号点击事件、删除事件、编辑显示事件、编辑确认事件、编辑取消事件、添加显示事件、添加确认事件、添加取消事件，将这九个事件创建完购物车就制作完成了。

下面是我写的示例；

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>基础购物车</title>
    <style>
      .bg {
        text-align: center;
 
      }
      div{
        display: none;
      }
    </style>
  </head>
  <body>
    <table cellspacing="0" border="1" class="bg">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>商品价格(单位为元)</th>
          <th>商品数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>商品1</td>
          <td>12.5</td>
          <td>
            <button>-</button>
            0
            <button>+</button>
          </td>
          <td>
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
        
      </tbody>
      <tr>
        <th>总价:</th>
        <th id="zj">0</th>
        <th>总数量:</th>
        <th id="zl">0</th>
      </tr>
    </table>
    <button class="tjone" onclick="xs(5,1)">添加</button>
    <br />
    <div class="srk">
      <input id="srone" type="text" placeholder="请输入商品名称">
      <input id="srtwo" type="number" placeholder="请输入商品价格">
      <input id="srthree" type="number" placeholder="请输入商品数量">
      <input id="srfo" type="hidden"/>
      <br />
      <button id="qr" onclick="qr(1)">确认</button>
      <button id="qu"onclick="qx(1)">取消</button>
    </div>
    <div class="srkk">
      <input id="srfive" type="text" placeholder="请输入商品名称">
      <input id="srsix"  type="number"placeholder="请输入商品价格">
      <input id="srseven"  type="number"placeholder="请输入商品数量">
      <input id="sreight" type="hidden"/>
      <br />
      <button id="tjtwo" onclick="qr(2)">确认</button>
      <button id="qutwo" onclick="qx(2)">取消</button>
    </div>
    
    <script src="js/index.js"></script>
  </body>
</html>

这是写在HTML里的，是购物车的基本样式，但是要注意，输入框其实有四个；

//获取html的总价
let zj = document.getElementById('zj')
//获取html的总数量
let zl = document.getElementById('zl')
//获取HTML中的tbody
let tbody = document.getElementsByTagName('tbody')[0];
//声明一个变量fz，让数据变成全局的
let fz
//声明new XMLHttpRequest
let zx = new XMLHttpRequest();
//使用 open 方法指定要请求的地址、类型和方式
zx.open('get', 'index.json', true);
//使用send方法发送请求
zx.send();
//绑定 onreadystatechange 事件
zx.onreadystatechange = function() {
  if (zx.readyState == 4 && zx.status == 200) {
    let text = zx.responseText;
    console.log(text);
    let data = JSON.parse(text);
    console.log(data);
    fz = data
    b = fz.length + 1
    xr()
  }
}
// 判断 readyState 和 status 的状态。
// 接收数据，通过 json 转换使用，是用json将数据转化为js可用的形式
// fz = 请求过来的数据
//调用函数 xr
 
// 封装函数
// 函数名为 xr
function xr() {
  let str = "";
  let count_price = 0;
  let count_quantity = 0;
  for (i = 0; i < fz.length; i++) {
    count_price += parseInt(fz[i].price) * parseInt(fz[i].quantity);
    count_quantity += parseInt(fz[i].quantity);
    str += `
            <tr>
          <td>${fz[i].commodity}</td>
          <td>${fz[i].price}</td>
          <td>
            <button onclick="num(${fz[i].id},${0})">-</button>
            ${fz[i].quantity}
            <button onclick="num(${fz[i].id},${1})">+</button>
          </td>
          <td>
            <button onclick="xs(${fz[i].id},${3})">编辑</button>
            <button onclick="num(${fz[i].id},${2})">删除</button>
          </td>
        </tr>`
  }
  // str +=`<tr>
  //      <th>总价:</th>
  //      <th>0</th>
  //      <th>总数量:</th>
  //      <th>0</th>
  //    </tr>`
  tbody.innerHTML = str;
  zj.innerHTML = count_price;
  zl.innerHTML = count_quantity;
}
//声明一个str空字符串
// 声明一个变量，值为0，为了计算总价格!变量名为count_price
// 声明一个变室，值为0，为了计算总数量!变量名为count_quantity
//利用for循环fz
// 让count_price+=数据里所有的价格*数量
// 让count_quantily+=数据里总数量
// 把自己创建的json数据，给HTML里的内容进行拼接
// 用innerHTHL给最外层的tbody进行渲染
 
 
//给加号设置点击事件
// function jia(jian) {
//  for (let i = 0; i < fz.length; i++)
//    if (jian == fz[i].id) {
//      fz[i].quantity++
//      console.log(fz)
//    }
//  xr();
// }
//创建函数jh(){
//获取商品id
//让商品数量通过点击加号++
//调用函数 xr 渲染
//}
 
function num(id,type){
   console.log(id,type);
  for (let i = 0; i <fz.length; i++)
  if ( id == fz[i].id){
    if ( type == 1){
      fz[i].quantity++
    }else if (type == 0 && fz[i].quantity > 0){
      fz[i].quantity--
    }else if (type == 2){              //合并加和减以及删除
      fz.splice(i, 1)
    }
  }
  xr()
}
 
//给减号设置点击事件 
// function jian(jian) {
//  for (let i = 0; i < fz.length; i++)
//    if (jian == fz[i].id && fz[i].quantity > 0) {
//      fz[i].quantity--
//    }
//  xr()
// }
//创建函数jianh(id){
//循环
//判断 数据的id是否等于传递过来的id
//if判断(                                  
//商品数量大于0是能减
//)
//调用函数 xr 渲染
//}
 
//给编辑按钮添加点击事件  确定编辑
// function redact(jian) {
//  //先将表单下方的四个输入框和确认按钮显示出来
//  document.getElementsByTagName('div')[0].style.display = "block";
//  for (let i = 0; i < fz.length; i++) {
//    if (jian == fz[i].id) {
//      document.getElementById("srone").value = fz[i].commodity;
//      document.getElementById("srtwo").value = fz[i].price;
//      console.log(document.getElementById("srone"))
//      document.getElementById("srthree").value = fz[i].quantity;
//      document.getElementById("srfo").value = fz[i].id;
//    } 
//  }
  
// }
 
 
// function qran() {
//  //获取到四个输入框的内容
//  let srone = document.getElementById("srone");
//  let srtwo = document.getElementById("srtwo");
//  let srthree = document.getElementById("srthree");
//  let srfo = document.getElementById("srfo");
//  console.log(srone.value);
//  console.log(srtwo.value);
//  console.log(srthree.value);
//  console.log(srfo.value);
//  //当四个输入框的值为null时页面中弹窗提示输入框的值为null
//  if (srone.value != '' && srtwo.value != '' && srthree.value != '' && srfo.valua != '' && srtwo.value >= 0 && srthree.value >= 0) {
//    // 循环所有数据
//    for (let ia = 0; ia < fz.length; ia++) {
//      //当数据中的id等于传递过来的id
//      if (srfo.value == fz[ia].id) {
//        //四个数据框的值等于fz对象中的值  
//        fz[ia].id = srfo.value;
//        fz[ia].commodity = srone.value;
//        console.log(srone.value);
//        fz[ia].price = srtwo.value;
//        fz[ia].quantity = srthree.value;
//      }
//    }
//  } else {
//    alert("输入值不能为空,并且不能设负数")
//  }
//  //将输入框内容初始化
//  document.getElementById("srone").value = null;
//  document.getElementById("srtwo").value = null;
//  document.getElementById("srthree").value = null;
//  document.getElementById("srfo").value = null;
//  //隐藏这几个输入框
//  document.getElementsByTagName("div")[0].style.display = "none";
//  xr()
// }
// 绑定点击事件函数名为bjone，编辑显示
//循环
//判断 数据的id是否等于传递过来的id
//三个输入框的值
// 显示
 
// function qxan() {
//  document.getElementsByTagName("div")[0].style.display = "none";
// }
// 在下面再添加—个取消按钮，绑定点击事件函数名为cancle
// 点击取消技钮后，会把输入框重新隐藏回去
// 把添加和取消接钮也隐薇掉
// function qxantwoo() {
//  document.getElementsByTagName("div")[1].style.display = "none";
// }
 
 
//合并编辑取消，添加取消
function qx(type){
  if(type ==1){
    document.getElementsByTagName("div")[0].style.display = "none";
  }else if ( type == 2){
    document.getElementsByTagName("div")[1].style.display = "none";
  }
}
 
function qr (type){
  if(type == 1){
    let srone = document.getElementById("srone");
      let srtwo = document.getElementById("srtwo");
      let srthree = document.getElementById("srthree");
      let srfo = document.getElementById("srfo");
      console.log(srone.value);
      console.log(srtwo.value);
      console.log(srthree.value);
      console.log(srfo.value);
      //当四个输入框的值为null时页面中弹窗提示输入框的值为null
      if (srone.value != '' && srtwo.value != '' && srthree.value != '' && srfo.valua != '' && srtwo.value >= 0 && srthree.value >= 0) {
        // 循环所有数据
        for (let ia = 0; ia < fz.length; ia++) {
          //当数据中的id等于传递过来的id
          if (srfo.value == fz[ia].id) {
            //四个数据框的值等于fz对象中的值  
            fz[ia].id = srfo.value;
            fz[ia].commodity = srone.value;
            console.log(srone.value);
            fz[ia].price = srtwo.value;
            fz[ia].quantity = srthree.value;
          }
        }
      } else {
        alert("输入值不能为空,并且不能设负数")
      }
      //将输入框内容初始化
      document.getElementById("srone").value = null;
      document.getElementById("srtwo").value = null;
      document.getElementById("srthree").value = null;
      document.getElementById("srfo").value = null;
      //隐藏这几个输入框
      document.getElementsByTagName("div")[0].style.display = "none";
      xr()
    }else if(type == 2){
      let srfive = document.getElementById("srfive").value;
        let srsix = document.getElementById("srsix").value;
        let srseven = document.getElementById("srseven").value;
        let sreight = document.getElementById("sreight").value;
        console.log(srtwo);
      //商品id++
        b++
        if (srfive != "" && srsix != "" && srseven != ""  && srsix >= 0 && srseven >= 0) {
          fz.push({
            "commodity": srfive,
            "price": srsix,
            "quantity": srseven,
            "id": b,
          })
        }else {
          alert("输入值不能为空,并且不能设负数")
        }
        xr()
        document.getElementById("srfive").value = null;
        document.getElementById("srsix").value = null;
        document.getElementById("srseven").value = null;
        document.getElementById("sreight").value = null;
        document.getElementsByTagName("div")[1].style.display = "none"
      
    }
}                     //合并编辑确认，添加确认
 
 
 
 
 
 
 
//删除商品这一行
// function sh(jian) {
//  for (let i = 0; i < fz.length; i++) {
//    if (jian == fz[i].id) {
//      fz.splice(i, 1)
//      xr()
//    }
//  }
// }
//创建函数sh(){
//根据商品id删除相应数据
// 循环所有数据
//当数据中的id等于传递过来的id
// 删除fz中的这一组对象   splice(下标，1)
//调用函数 xr 渲染
//}
// function tjone() {
//  document.getElementsByTagName("div")[1].style.display = "block";
// }
 
function xs(id,type){
  if (type == 1){
    document.getElementsByTagName("div")[1].style.display = "block";
  }else if(type == 3){
    document.getElementsByTagName('div')[0].style.display = "block";
    for (let i = 0; i < fz.length; i++) {
      if (id == fz[i].id) {
        document.getElementById("srone").value = fz[i].commodity;
        document.getElementById("srtwo").value = fz[i].price;
        console.log(document.getElementById("srone"))
        document.getElementById("srthree").value = fz[i].quantity;
        document.getElementById("srfo").value = fz[i].id;
      } 
    }
  }          //合并编辑、添加显示
}
 
 
 
 
//在表格下面加个添加按钮1并绑定点击事件
//点击后可以显示三个输入框和添加按钮2以及一个取消按钮
// function qrtwoo() {
//  let srfive = document.getElementById("srfive").value;
//  let srsix = document.getElementById("srsix").value;
//  let srseven = document.getElementById("srseven").value;
//  let sreight = document.getElementById("sreight").value;
//  console.log(srtwo);
//   //商品id++
//  b++
//  if (srfive != "" && srsix != "" && srseven != ""  && srsix >= 0 && srseven >= 0) {
//    fz.push({
//      "commodity": srfive,
//      "price": srsix,
//      "quantity": srseven,
//      "id": b,
//    })
//  }else {
//    alert("输入值不能为空,并且不能设负数")
//  }
//  xr()
//  document.getElementById("srfive").value = null;
//  document.getElementById("srsix").value = null;
//  document.getElementById("srseven").value = null;
//  document.getElementById("sreight").value = null;
//  document.getElementsByTagName("div")[1].style.display = "none"
// }
//给添加按钮2绑定点击事件起一个函数名叫tjtwoo
//获取到三个输入框
//if判断三个输入框里是否有值
//有值的话添加
//如果没值
//出现弹窗
//在调用函数 xr 渲染
//给取消按钮添加点击事件起一个函数名叫qx
//点击取消按钮会让输入框、tjtwo/qx重新隐藏

这是写在js里的，是要操作的数据，在这里面我单个点击事件和合并事件都写了一遍，合并事件要比单独一个一个写事件更节约代码！


文章标签：
JavaScript
小老头头头头
目录
相关文章
雷霆半月斩掉你的板砖
|
1月前
|
前端开发 JavaScript
简单购物车功能制作
简单购物车功能制作
雷霆半月斩掉你的板砖
28 0
小华qvq
|
1月前
|
JavaScript
基础购物车
基础购物车
小华qvq
19 1
穆雄雄.
|
1月前
购物车的功能——界面源码
购物车的功能——界面源码
穆雄雄.
18 1
她说她一如既往的爱我
|
1月前
基础购物车功能
基础购物车功能
她说她一如既往的爱我
16 0
月木天上
|
10月前
移动端购物车模块设计
移动端购物车模块设计
月木天上
69 0
SouthernWind
uniapp——添加购物车数据以及删除购物车数据
添加购物车数据以及删除购物车数据
SouthernWind
163 0
花花叔叔
购物车案例
购物车案例
花花叔叔
75 0
购物车案例
java3y
|
前端开发 Java 数据库
购物车案例【简单版】（二）
为了巩固MVC的开发模式，下面就写一个购物车的小案例..
java3y
230 0
购物车案例【简单版】（二）
java3y
|
前端开发
购物车案例【简单版】（一）
为了巩固MVC的开发模式，下面就写一个购物车的小案例..
java3y
193 0
购物车案例【简单版】（一）
java3y
|
前端开发 JavaScript
购物车案例【简单版】（五）
为了巩固MVC的开发模式，下面就写一个购物车的小案例..
java3y
173 0