JavaScript开发购物车... 登录

JavaScript开发购物车之购物车功能实现

上一节对购物车页面进行了相关的设计

本节通过JavaScript代码实现购物车各项功能。

思路:
第一步:当页面加载完后,根据本地的数据,动态生成表格(购物车列表)
获取所要操作的节点对象
判断购物车中是否有数据?
有:显示出购物列表
没有:提示购物车为空

第二步:当购物车列表动态生成后,获取tbody里所有 的checkeBox标签节点对象,看那个被选中就获取对应行小计进行总价格运算。
第三步:为每一个checkbox添加一个onchange事件,根据操作更改总价格
第四步:全选
第五步:为加减按钮添加一个鼠标点击事件,更改该商品的数量

第六步:删除
获取所有的删除按钮
为删除按钮添加一个鼠标点击事件
删除当前行,并更新本地数据

<script>
var listObj = getAllData();
var table = document.getElementById("table")
var box = document.getElementById("box")
var tbody = document.getElementById("tbody");
var totalPrice = document.getElementById("totalPrice");
var allCheck = document.getElementById("allCheck");

if(listObj.length == 0) { //购物车为空
  box.className = "box";
  table.className = "hide";
} else {
  box.className = "box hide";
  table.className = "";
  for(var i = 0, len = listObj.length; i < len; i++) {
    var tr = document.createElement("tr"); //createElement() 方法通过指定名称创建一个元素
    tr.setAttribute("pid", listObj[i].pid);
    //setAttribute() 方法创建或改变某个新属性。如果指定属性已经存在,则只设置该值。
    //{"pid":值,"pImg":值,"pName":值,"pDesc":值,"price":值,"pCount":1},
    tr.innerHTML = '<td style="text-align: center;">' +
        '<input type="checkbox" class="ck"  />' +
        '</td>' +
        '<td>' +
        '<img src="' + listObj[i].pImg + '" alt="" />' +
        '</td>' +
        '<td style="color: #1E5494; font-size: 14px;">' + '<p style="margin: 0 25%;">'+ listObj[i].pDesc + '</p>' +
        '</td>' +
        '<td>' +
        '<button style="margin-left: 35%" class="down">-</button>' +
        '<input style="width: 10%;" type="text" value="' + listObj[i].pCount + '" readonly="readonly" />' +
        '<button class="up">+</button>' +
        '</td>' +
        '<td>' +
        '<span style="font-size: 16px;font-family: 微软雅黑,宋体;font-weight: bold;display: block;text-align: center;">'+ listObj[i].price +  '</span>' +
        '</td>' +
        '<td>' +
        '<span style="font-size: 16px;font-family: 微软雅黑,宋体;font-weight: bold;display: block;text-align: center;">'+ listObj[i].price * listObj[i].pCount + '</span>' +
        '</td>' +
        '<td>' +
        '<button style="display: block; margin:auto;" class="del" >删除</button>' +
        '</td>';
    tbody.appendChild(tr);//appendChild() 方法向节点添加最后一个子节点。
  }
}

/*
 功能:计算总价格
 */
var cks = document.querySelectorAll("tbody .ck");
//querySelectorAll()方法返回匹配指定 CSS 选择器元素的所有元素 。
function getTotalPrice() {
  cks = document.querySelectorAll("tbody .ck");
  var sum = 0;
  for(var i = 0, len = cks.length; i < len; i++) {
    if(cks[i].checked) { //如果当前被选中
      var tr = cks[i].parentNode.parentNode;
      //parentNode 属性以 Node 对象的形式返回指定节点的父节点。如果指定节点没有父节点,则返回 null。
      var temp = tr.children[5].firstElementChild.innerHTML;
      sum = Number(temp) + sum;
    }
  }
  return sum;
}
/*循环遍历为每一个checkbox添加一个onchange事件*/
for(var i = 0, len = cks.length; i < len; i++) {
  cks[i].onchange = function() {
    checkAllChecked();
    totalPrice.innerHTML = getTotalPrice();
  }
}

/*全选实现*/
allCheck.onchange = function() {
  if(this.checked) {
    for(var i = 0, len = cks.length; i < len; i++) {
      cks[i].checked = true;
    }
  } else {
    for(var i = 0, len = cks.length; i < len; i++) {
      cks[i].checked = false;
    }
  }
  totalPrice.innerHTML = getTotalPrice();
}

var downs = document.querySelectorAll(".down"); //一组减的按钮
var ups = document.querySelectorAll(".up"); //一组加的按钮
var dels = document.querySelectorAll(".del"); //一组删除按钮
for(var i = 0, len = downs.length; i < len; i++) {
  downs[i].onclick = function() {
    var txtObj = this.nextElementSibling;//下一个兄弟节点
    var tr = this.parentNode.parentNode;
    var pid = tr.getAttribute("pid"); //getAttribute() 方法返回指定属性名的属性值。
    txtObj.value = txtObj.value - 1;
    if(txtObj.value < 1) {
      txtObj.value = 1;
      updateObjById(pid, 0)
    } else {
      updateObjById(pid, -1)
    }
    tr.children[0].firstElementChild.checked = true;
    checkAllChecked();
    var price = tr.children[4].firstElementChild.innerHTML;
    tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
    totalPrice.innerHTML = getTotalPrice();

  }

  ups[i].onclick = function() {
    var txtObj = this.previousElementSibling;//上一个兄弟节点
    var tr = this.parentNode.parentNode;
    var pid = tr.getAttribute("pid");
    txtObj.value = Number(txtObj.value) + 1;
    updateObjById(pid, 1)
    tr.children[0].firstElementChild.checked = true;
    checkAllChecked()
    var price = tr.children[4].firstElementChild.innerHTML;
    tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
    totalPrice.innerHTML = getTotalPrice();
  }

  dels[i].onclick = function() {
    var tr = this.parentNode.parentNode;
    var pid = tr.getAttribute("pid")
    if(confirm("确定删除?")) {
      //remove()  移除
      tr.remove();
      listObj = deleteObjByPid(pid);
    }
    if(listObj.length == 0) { //购物车为空
      box.className = "box";
      table.className = "hide";
    } else {
      box.className = "box hide";
      table.className = "";
    }
    totalPrice.innerHTML = getTotalPrice();
  }
}

/*检测是否要全选*/
function checkAllChecked() {
  var isSelected = true; //全选是否会选中
  for(var j = 0, len = cks.length; j < len; j++) {
    if(cks[j].checked == false) {
      isSelected = false;
      break;
    }
  }
  allCheck.checked = isSelected;
}
</script>

创建一个cart.js文件把上面的JavaScript代码放入其中。

<script type="text/javascript" src="cart.js"></script>

以后从HTML页面调用,实现功能模块效果。


下一节
<script> var listObj = getAllData(); var table = document.getElementById("table") var box = document.getElementById("box") var tbody = document.getElementById("tbody"); var totalPrice = document.getElementById("totalPrice"); var allCheck = document.getElementById("allCheck"); if(listObj.length == 0) { //购物车为空 box.className = "box"; table.className = "hide"; } else { box.className = "box hide"; table.className = ""; for(var i = 0, len = listObj.length; i < len; i++) { var tr = document.createElement("tr"); //createElement() 方法通过指定名称创建一个元素 tr.setAttribute("pid", listObj[i].pid); //setAttribute() 方法创建或改变某个新属性。如果指定属性已经存在,则只设置该值。 //{"pid":值,"pImg":值,"pName":值,"pDesc":值,"price":值,"pCount":1}, tr.innerHTML = '<td style="text-align: center;">' + '<input type="checkbox" class="ck" />' + '</td>' + '<td>' + '<img src="' + listObj[i].pImg + '" alt="" />' + '</td>' + '<td style="color: #1E5494; font-size: 14px;">' + '<p style="margin: 0 25%;">'+ listObj[i].pDesc + '</p>' + '</td>' + '<td>' + '<button style="margin-left: 35%" class="down">-</button>' + '<input style="width: 10%;" type="text" value="' + listObj[i].pCount + '" readonly="readonly" />' + '<button class="up">+</button>' + '</td>' + '<td>' + '<span style="font-size: 16px;font-family: 微软雅黑,宋体;font-weight: bold;display: block;text-align: center;">'+ listObj[i].price + '</span>' + '</td>' + '<td>' + '<span style="font-size: 16px;font-family: 微软雅黑,宋体;font-weight: bold;display: block;text-align: center;">'+ listObj[i].price * listObj[i].pCount + '</span>' + '</td>' + '<td>' + '<button style="display: block; margin:auto;" class="del" >删除</button>' + '</td>'; tbody.appendChild(tr);//appendChild() 方法向节点添加最后一个子节点。 } } /* 功能:计算总价格 */ var cks = document.querySelectorAll("tbody .ck"); //querySelectorAll()方法返回匹配指定 CSS 选择器元素的所有元素 。 function getTotalPrice() { cks = document.querySelectorAll("tbody .ck"); var sum = 0; for(var i = 0, len = cks.length; i < len; i++) { if(cks[i].checked) { //如果当前被选中 var tr = cks[i].parentNode.parentNode; //parentNode 属性以 Node 对象的形式返回指定节点的父节点。如果指定节点没有父节点,则返回 null。 var temp = tr.children[5].firstElementChild.innerHTML; sum = Number(temp) + sum; } } return sum; } /*循环遍历为每一个checkbox添加一个onchange事件*/ for(var i = 0, len = cks.length; i < len; i++) { cks[i].onchange = function() { checkAllChecked(); totalPrice.innerHTML = getTotalPrice(); } } /*全选实现*/ allCheck.onchange = function() { if(this.checked) { for(var i = 0, len = cks.length; i < len; i++) { cks[i].checked = true; } } else { for(var i = 0, len = cks.length; i < len; i++) { cks[i].checked = false; } } totalPrice.innerHTML = getTotalPrice(); } var downs = document.querySelectorAll(".down"); //一组减的按钮 var ups = document.querySelectorAll(".up"); //一组加的按钮 var dels = document.querySelectorAll(".del"); //一组删除按钮 for(var i = 0, len = downs.length; i < len; i++) { downs[i].onclick = function() { var txtObj = this.nextElementSibling;//下一个兄弟节点 var tr = this.parentNode.parentNode; var pid = tr.getAttribute("pid"); //getAttribute() 方法返回指定属性名的属性值。 txtObj.value = txtObj.value - 1; if(txtObj.value < 1) { txtObj.value = 1; updateObjById(pid, 0) } else { updateObjById(pid, -1) } tr.children[0].firstElementChild.checked = true; checkAllChecked(); var price = tr.children[4].firstElementChild.innerHTML; tr.children[5].firstElementChild.innerHTML = price * txtObj.value; totalPrice.innerHTML = getTotalPrice(); } ups[i].onclick = function() { var txtObj = this.previousElementSibling;//上一个兄弟节点 var tr = this.parentNode.parentNode; var pid = tr.getAttribute("pid"); txtObj.value = Number(txtObj.value) + 1; updateObjById(pid, 1) tr.children[0].firstElementChild.checked = true; checkAllChecked() var price = tr.children[4].firstElementChild.innerHTML; tr.children[5].firstElementChild.innerHTML = price * txtObj.value; totalPrice.innerHTML = getTotalPrice(); } dels[i].onclick = function() { var tr = this.parentNode.parentNode; var pid = tr.getAttribute("pid") if(confirm("确定删除?")) { //remove() 移除 tr.remove(); listObj = deleteObjByPid(pid); } if(listObj.length == 0) { //购物车为空 box.className = "box"; table.className = "hide"; } else { box.className = "box hide"; table.className = ""; } totalPrice.innerHTML = getTotalPrice(); } } /*检测是否要全选*/ function checkAllChecked() { var isSelected = true; //全选是否会选中 for(var j = 0, len = cks.length; j < len; j++) { if(cks[j].checked == false) { isSelected = false; break; } } allCheck.checked = isSelected; } </script>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送