实现网页购物车功能，完成基本的商品价格计算等功能

效果图

说明

html, css, js 代码分别保存 index.html , main.css, main.js 文件中，而main.css 和 main.js 文件又分别保存在 css 和 js 文件夹下。3张素材图片保存在 images 目录下，具体情况见下图：

素材图片

pic01.jpg
pic02.jpg
pic03.jpg

源代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>购物车——PC端</title><link rel="stylesheet" href="css/main.css">
</head><body><div class="wrap clearfix"><div class="location">当前位置：首页<span>&gt;</span><b class="red">购物车</b></div><table width="100%" class="cartTable" cellspacing="0" cellpadding="10px"><!-- 首行 --><tr class="title"><td width="50"><input type="checkbox" name="" class="choose_all"></td><td width="100" class=""><span style="margin-left: -10px;">全选</span></td><td width="400">商品信息</td><td width="150">单价（元）</td><td width="150">数量</td><td width="150">金额（元）</td><td width="80">操作</td></tr><!-- 商品具体信息 --><tr class="row"><td><input type="checkbox" name="" class="choose"></td><td class="tal"><a href="#" class="pic"><img src="data:images/pic01.jpg" alt=""></a></td><td class="tal"><a href="#">凌美Lamy Safari钢笔/签字笔T52黑色墨水</a></td><td><span class="tdl">158.00</span><br><b class="unit">129.00</b></td><td><div class="amount"><a href="#" class="Increase">+</a><input type="text" value="1" class="unum"><a href="#" class="Reduce">-</a></div></td><td><b class="u-price">129.00</b></td><td><a href="#" class="btn-del">删除</a></td></tr><tr class="row"><td><input type="checkbox" name="" checked="checked" class="choose"></td><td class="tal"><a href="#" class="pic"><img src="data:images/pic02.jpg" alt=""></a></td><td class="tal"><a href="#">凌美Lamy Safari钢笔/签字笔T52黑色墨水</a></td><td><span class="tdl">358.00</span><br><b class="unit">299.00</b></td><td><div class="amount"><a href="#" class="Increase">+</a><input type="text" value="1" class="unum"><a href="#" class="Reduce">-</a></div></td><td><b class="u-price">299.00</b></td><td><a href="#" class="btn-del">删除</a></td></tr><tr class="row"><td><input type="checkbox" name="" checked="checked" class="choose"></td><td class="tal"><a href="#" class="pic"><img src="data:images/pic03.jpg" alt=""></a></td><td class="tal"><a href="#">德国进口 凌美(LAMY)签字笔钢笔墨水水笔专用一次性墨水胆笔芯5支一盒T10德国进口</a></td><td><span class="tdl">54.00</span><br><b class="unit">37.00</b></td><td><div class="amount"><a href="#" class="Increase">+</a><input type="text" value="1" class="unum"><a href="#" class="Reduce">-</a></div></td><td><b class="u-price">37.00</b></td><td><a href="#" class="btn-del">删除</a></td></tr><tr class="count"><td colspan="7"><div class="jiesuan clearfix"><div class="left fl"><p><input type="checkbox" name="" class="choose_all"> 全选&nbsp;&nbsp;&nbsp;<a href="#" class="del_check">删除选中商品</a></p></div><div class="right fr clearfix"><p>商品总计：￥465.00</p><p>活动优惠：-￥0.00</p><p>已选商品<span class="red t-number"> 0 </span>件 总价(不含运费、税费)：<span class="red t-price">￥0.00</span></p><!-- <div><a href="#" class="btn pay">结算</a></div> --><a href="#" class="btn pay fr">结算</a></div></div></td></tr></table></div>    <!-- 引入JS文件 --><script src="js/main.js"></script>
</body></html>

CSS代码

/* 公共样式 */
.clearfix{content: '';display: block;clear: both;
}
.red{color: #f30213;
}
.fl{float: left;
}
.fr{float: right;
}/* 清除默认样式 */
*{margin: 0px;padding: 0px;font-size: 14px;
}
a{text-decoration: none;color: #333;
}
input{outline: none;
}.wrap{width: 1180px;margin: 0 auto;
}
.wrap .location{padding: 10px 0;border-bottom: 1px solid #ccc;margin-bottom: 20px;
}
.cartTable{border: 1px solid #ccc;}
.cartTable tr.title{background-color: rgb(241, 243, 244);font-weight: bold;
}
.cartTable tbody tr td{/* border: 1px solid rgb(245, 245, 245); */padding: 10px;
}
/* 原价 */
.cartTable tbody tr td .tdl{text-decoration: line-through;color: #999;
}
/* 商品数量 */
.cartTable tr .amount .unum{width: 70px;  height: 30px;box-sizing: border-box;text-align: center;font-size: 16px;float: left;
}
/* 数量加减按钮 */
.cartTable tr .amount a{display: block;width: 30px;height: 30px;line-height: 30px;text-align: center;font-size: 18px;border: 1px solid #ccc;box-sizing: border-box;
}
.cartTable tr .amount a.Increase{border-right: none;float: left;
}
.cartTable tr .amount a.Reduce{border-left: none;float: left;
}.cartTable tr.count .jiesuan .right{text-align: right;}
.cartTable tr.count .jiesuan .right p{margin: 5px 0;
}
.cartTable tr.count .jiesuan .right .pay{display: block;width: 160px;height: 50px;line-height: 50px;    background-color: #f30213;color: #fff;font-weight: bold;  text-align: center;font-size: 20px;
}

JS代码

/*功能列表1，全选功能选中所有行，汇总价格2，单选功能选中或取消选中一行3，数量加减按钮增减商品数量，计算小计价格4，删除按钮移除当前行，重新计算总计价格5，删除被选中的商品
*/// 获取所有加减按钮(得到的是一个数组)
var add = document.querySelectorAll(".Increase");
var reduce = document.querySelectorAll(".Reduce");
// 获取所有文本框
var inputs = document.querySelectorAll(".unum");
// 获取所有行
var rows = document.querySelectorAll(".row");
// 获取所有单选框
var chooses = document.querySelectorAll(".choose");
// 获取所有全选按钮
var choose_alls = document.querySelectorAll(".choose_all");
// 获取所有删除按钮
var btn_dels = document.querySelectorAll(".btn-del");
// 删除选中的商品
var del_check = document.querySelector(".del_check");// 给所有的加减按钮绑定点击事件
for(var i=0; i<add.length; i++){add[i].onclick=function(){// 获取对应的父节点var amount = this.parentNode;// 获取文本框var input = amount.querySelector(".unum");// 获取文本框中的数量var num = input.value;num++;// 修改文本框的值input.value=num;// 计算小计// 获取当前行var tr =  amount.parentNode.parentNode;// 获取商品单价var unit = tr.querySelector(".unit");var price = unit.innerHTML;// 重新计算小计价格smallTotal = num*price;// 保留两位小数smallTotal = smallTotal.toFixed(2);// 将计算好的小计价格设置给金额var u_price = tr.querySelector(".u-price");u_price.innerHTML = smallTotal;// 使当前行被选中var choose = tr.querySelector(".choose");// 把它当成逻辑变量，赋true false也可以 choose.checked = "checked";// 计算总计setTotal();}
}for(var i=0; i<reduce.length; i++){reduce[i].onclick=function(){// 获取对应的父节点var amount = this.parentNode;// 获取文本框var input = amount.querySelector(".unum");// 获取文本框中的数量var num = input.value;if(num > 1){num--;}// 修改文本框的值input.value=num;// 计算小计// 获取当前行var tr =  amount.parentNode.parentNode;// 获取商品单价var unit = tr.querySelector(".unit");var price = unit.innerHTML;// 重新计算小计价格smallTotal = num*price;// 保留两位小数smallTotal = smallTotal.toFixed(2);// 将计算好的小计价格设置给金额var u_price = tr.querySelector(".u-price");u_price.innerHTML = smallTotal;// 使当前行被选中var choose = tr.querySelector(".choose");// 把它当成逻辑变量，赋true false也可以 choose.checked = "checked";setTotal();}
}// 用户手动修改文本框中的商品数量
for(var i=0; i<inputs.length; i++){// 给每个文本框绑定 失焦 事件 inputs[i].onblur = function(){// 防止出现负数if(this.value < 1){this.value = 1;}// 防止输入小数或其它字符this.value = parseInt(this.value);// 计算小计// 获取当前行var tr =  this.parentNode.parentNode.parentNode;// 获取商品单价var unit = tr.querySelector(".unit");var price = unit.innerHTML;// 重新计算小计价格smallTotal = this.value*price;// 保留两位小数smallTotal = smallTotal.toFixed(2);// 将计算好的小计价格设置给金额var u_price = tr.querySelector(".u-price");u_price.innerHTML = smallTotal;// 使当前行被选中var choose = tr.querySelector(".choose");// 把它当成逻辑变量，赋true false也可以 choose.checked = "checked";setTotal();}
}// 计算总计价格 & 计算选中的商品总数 & 同时判断是否全选
function setTotal(){var total = 0;  // 商品总价var allNum = 0; // 商品总数// 重新获取行rows = document.querySelectorAll(".row");// 遍历所有行for(var i=0; i<rows.length; i++){// 查找被选中的行var checkbox = rows[i].querySelector(".choose");if(checkbox.checked){// 获取小计价格（得到的是字符串，不是数字，需要转化）var smallTotal = rows[i].querySelector(".u-price").innerHTML;// 获取商品数量var num = rows[i].querySelector(".unum").value;// 把小计价格转化为数字smallTotal = Number(smallTotal);total += smallTotal;// 计算商品总数num = Number(num);allNum += num;}}// 把总计放在它应在的位置 var totalPrice = document.querySelector(".t-price");totalPrice.innerHTML = total.toFixed(2);// 设置商品总数document.querySelector(".t-number").innerHTML = allNum;var isCheckAll = true;for(var i=0; i<rows.length; i++){var checkbox = rows[i].querySelector(".choose");if(!checkbox.checked){isCheckAll = false;break;}}if(rows.length<=0){isCheckAll = false;}// 将两个全选框设置为和全选变量相同的值choose_alls[0].checked = isCheckAll;choose_alls[1].checked = isCheckAll;
}// 单选框点击事件
for(var i=0; i<chooses.length; i++){chooses[i].onclick = function(){// 求一下总计就行了setTotal();}
}// 全选框点击事件
for(var i=0; i<choose_alls.length; i++){choose_alls[i].onclick = function(){// 全选/全不选所有单选框for(var i=0; i<rows.length; i++){var checkbox = rows[i].querySelector(".choose");checkbox.checked = this.checked;}// 与另外一个全选框联动choose_alls[0].checked = this.checked;choose_alls[1].checked = this.checked;// 计算总计setTotal();}
}// 删除当前行
for(var i=0; i<btn_dels.length; i++){btn_dels[i].onclick = function(){var tr = this.parentNode.parentNode;tr.parentNode.removeChild(tr);setTotal();}
}// 删除选中行
del_check.onclick = function(){rows = document.querySelectorAll(".row");for(var i=0; i<rows.length; i++){var checkbox = rows[i].querySelector(".choose");if(checkbox.checked){rows[i].parentNode.removeChild(rows[i]);}}
}

实现网页购物车功能，完成基本的商品价格计算等功能相关推荐

php 商城套餐搭配功能,速卖通商品搭配套餐功能已上线！设置速卖通搭配套餐仅需三步...
据雨果网获悉,速卖通商品搭配套餐功能已于 10 月 19 日上线.商品搭配套餐的主要功能及作用,主要是帮助速卖通的卖家,通过自行选择商品,设置不同商品间搭配优惠促销价格,提高商品推广内容的丰富性及专业 ...
JavaScript 网页购物车项目
今天是JavaScript的一个汇总,最近小编把自己曾经写过的JavaScript 网页购物车项目给整理了一下,大家可以看一下,然后自己也可以写一个网页购物车项目噢,然后我们的JavaScript ...
JavaScript网页购物车
今天给大家讲解一个网页购物车的案例,案例比较简陋,包含登录注册购物车界面. 在做项目之前,你要在自己项目中建一个img包,用来存储你项目中所需用到的图片,如下图所示一.登录注册介绍界面代码展示 & ...
仿淘宝购物车demo 增加和减少商品数量
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在上一篇 ...
仿淘宝购物车demo---增加和减少商品数量
在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...
mvc模式网页购物车
本学期学习JSP和Servlet后,老师要求使用MVC模式下编写一个网页购物车,以下是一些主要代码及开发心得这个是包的截图先是注册页面,编写一个表单,表单方法调用另一个JSP页面(因为我这个页面是 ...
抖音橱窗发货显示服务器繁忙,抖音商品橱窗分享功能一直在审核是什么原因？怎么解决...
原标题:抖音商品橱窗分享功能一直在审核是什么原因?怎么解决抖音商品橱窗分享功能一直在审核是什么原因?怎么解决抖音今年火得不得了,有人刷抖音根本停不下来,就连微信都意识到了这个短视频抖音正在把分流微 ...
第39-43课 thinkphp5完成商品会员价格功能(后置勾子afterInsert)
目录功能一:利用后置勾子,处理好商品主键id,会员的价格,再插入member_price表里. 要实现的功能: 思路: html里控制器里模型里的后置勾子afterInsert() 功能二:利用 ...
java商品搜索功能_利用solr实现商品的搜索功能(实例讲解)
后期补充: 为什么要用solr服务,为什么要用luncence? 问题提出:当我们访问购物网站的时候,我们可以根据我们随意所想的内容输入关键字就可以查询出相关的内容,这是怎么做到呢?这些随意的数据不可 ...

实现网页购物车功能，完成基本的商品价格计算等功能

效果图

说明

素材图片

源代码

HTML代码

CSS代码

JS代码

实现网页购物车功能，完成基本的商品价格计算等功能相关推荐

最新文章

热门文章