HTML,CSS,JS完成购物车功能

这是我们要完成的购物车界面

初始状态，当我选中某件商品时，总数量栏，总价栏显示默认数量和总价。
当我点击全选按钮时，所有的复选框都要被我选到。当我取消全选按钮时，所有商品都要取消选中状态。
当购物车处于全选状态时，如果我取消选中某一件商品，全选按钮就要处于未被选中的状态。
当选中某个商品时，我可以对它进行任何操作，包括：增加、减少、删除。
当我点击结算时，系统告诉我购物的总价。

通过HTML和CSS布局后可以得到下面这个模型（完整代码参考文尾）

紧接着我们就要在这基础上增加各种功能。

全选按钮。

oSelect.onclick = function() {if (oSelect.checked) {for (var i = 0; i < aItems.length; i++) {if (aItems[i].checked) {} else {oSelect.checked = true;aItems[i].checked = true;getStart();}}} else {//全消for (var i = 0; i < aItems.length; i++) {if (aItems[i].checked) {aItems[i].checked = false;oSum.innerText = 0;oGoods.innerText = 0;} else {}}}}

单击复选框，判断我所勾选的复选框。

function getStart() {  var oSelect = document.getElementById("selectAll");var aItems = document.getElementsByClassName("check-one"); var oSum = document.getElementById("priceTotal");var oGoods = document.getElementById("selectedTotal"); var aSubtotal = document.getElementsByClassName("subtotal");var aCountInput = document.getElementsByClassName("count-input");   var a=0;for (var i=0; i<aItems.length; i++) {  if (aItems[i].checked) {   chooseIt(i); a++; if(a==3){oSelect.checked=true;    //当所有选项都选到时,全选按钮自动勾选}} else {  oSelect.checked = false;    //任意一个选项没勾选,全选按钮不选chooseIt(i);}}
}

3.对商品进行加、减和删除。

function getPlus(n) {var aCountInput = document.getElementsByClassName("count-input"); //增加单件商品的数量var temp = parseInt(aCountInput[n].value) + 1;aCountInput[n].value = temp;
}

function getReduce(n) {var aCountInput = document.getElementsByClassName("count-input");//减少单件商品的数量var temp = parseInt(aCountInput[n].value) - 1;aCountInput[n].value = temp;//当剪到数量为1件时,停止减if (aCountInput[n].value < 1) {aCountInput[n].value = 1;}
}

aDel[i].onclick = function() {  var oDialog = confirm("确定要删除吗?");if (oDialog) { oTab.tBodies[0].removeChild(aDel[i].parentNode.parentNode);getGoods();getSum();}getStart();  //更新表格中行的数量}

然后计算单件商品的总价，总商品的数量和总价。

function getTotal(n) {var aPrice = document.getElementsByClassName("price");var aCountInput = document.getElementsByClassName("count-input");var aSubtotal = document.getElementsByClassName("subtotal");//计算单件商品的总价var oMoney = parseInt(aPrice[n].innerText) * parseInt(aCountInput[n].value);aSubtotal[n].innerText = oMoney;
}

function getGoods() { var num = 0;var oGoods = document.getElementById("selectedTotal");var aItems = document.getElementsByClassName("check-one");var aCountInput = document.getElementsByClassName("count-input"); //循环,计算选中的商品的总数量for (var i = 0; i < aItems.length; i++) {if (aItems[i].checked) {num += parseInt(aCountInput[i].value);} else {num += 0;}}oGoods.innerText = num;
}

function getSum() {var temp = 0;var oSum = document.getElementById("priceTotal");var aItems = document.getElementsByClassName("check-one");var aSubtotal = document.getElementsByClassName("subtotal");//循环,计算选中的商品的总价格for (var j = 0; j < aItems.length; j++) {if (aItems[j].checked) {temp += parseInt(aSubtotal[j].innerText);} else {temp += 0;}}oSum.innerText = temp;
}

5.结算时弹出文本框显示所花的金额。（这一步超级简单，只需要把总价栏的金额弹出来即可）

function showTotal() {var money = document.getElementById("priceTotal").innerText;alert("你总共花了" + money + "大洋");
}

在这里我们就完成了购物车，购物车看起来很简单，但实际操作起来还是要严谨的逻辑思维，基于曾经看别人关于购物车的博客，多多少少都有些小细节上的错误或者不完善，在此我给大家一个完美的购物车，希望能帮助到大家，大家有疑问可在下方评论，看到了会及时回复的哟！

详细代码: https://github.com/Siwen19/js/tree/master/myShoppingCart

HTML,CSS,JS完成购物车功能相关推荐

js购物车功能php,使用JS实现购物车功能步骤详解
这次给大家带来使用JS实现购物车功能步骤详解,使用JS实现购物车功能的注意事项有哪些,下面就是实战案例,一起来看一下. 我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪 ...
html+css+js实现抽奖功能
html+css+js实现抽奖功能一.代码 <!DOCTYPE html> <html lang="en"> <head><meta c ...
JS实现购物车功能（JS案例）
整理了一下当时学js写的一些案例,觉得购物车功能在一般网站比较常见且基础,现在把它整理出来,需要的小伙伴可以参考一下. 该案例购物车主要功能如下: 1. 商品单选.全选.反选功能 2. 商品添加.删除 ...
HTML+CSS+JS实现计算机功能
本文运用前端代码实现一个简单的计算器界面,并通过JS实现了基本的运算功能.(加.减.乘.除.清屏/退格.取余.取倒) 需要源代码的可以加下面的QQ群,里面有各种学习资料,期待大家的加入! 点我进群 ...
Html+css+js实现放大镜功能（详细完整代码）
通过将鼠标指向指定的图片,将鼠标移动到图片时,显示一个透明的小区域,然后将小区域的部分放大,查看细节. 运行效果: 详细代码: <!DOCTYPE html> <html>& ...
html用js计算显示,html+css+js实现计算器功能
/* 主体 */ .counter{ width: 396px; height: 486px; background-color: #F2F2F2; border: 1px solid #C2C3C6 ...
js+html实现购物车功能
实现购物车物品删除,数量增加减少,选中,批量删除,结算功能,金额汇总,商品数量汇总,前端代码时借用一个博主小哥的,因为本博主对前端显示界面的美化不擅长,这里为了方便,就引用其他博主小哥的前端界面代码! ...
H5+css+js前端特效源代码：发光动画按钮：上传按钮
前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能效果展示源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...
小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS
文章目录前言一.登录页二.首页三.我的购物车页四.我的订单页五.确认订单页六.详情页七.整体结构和效果图总结前言仿小米商城官网项目是本人实训内容,实训老师带着做的首页和登录页,本 ...

HTML,CSS,JS完成购物车功能

HTML,CSS,JS完成购物车功能相关推荐

最新文章

热门文章