实现网页购物车功能，完成基本的商品价格计算等功能
2020-06-04 07:13
495 查看
效果图
说明
- 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>></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="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="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="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"> 全选 <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]);
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
- JavaScript实现购物车计算价格功能
- jquery实现购物车数量加减，价格计算功能
- js购物车选中商品实现计算商品总价格
- andriod———1.实现原生登录注册。 2.首页完成商品列表展示点击相对应的商品ID进入商品详情 3.商品详情页面展示数据，点击加入购物车进入购物车页面 4.购物车页面完成购物车编辑，删除，功能
- 20.购物车商品价格的总和（里面有一些功能没有实现，创建textview布局对象，然后for()遍历数据求和）
- jQuery实现购物车计算价格功能的方法
- 一个改进的用javascript写的购物车页面（具备添加、删除商品，计算总量和价格的功能）
- Magento购物车价格计算的功能实现之代码理解
- 原生JS实现购物车的添加删除，以及总价计算的功能
- Bootstrap实现购物车功能，相同商品只加数量
- 编写一个简易购物车，实现向购物车内添加商品，移除指定商品及清空购物车功能。
- 实验题7.1: 编写一个程序algo7-1.cpp，实现二叉树的各种基本运算，并在此基础上设计一个程序Main.cpp完成如下功能（b为如下图所示的一棵二叉树）
- vue实现的购物车商品累加结算功能代码
- JSP类似购物车根据后台数据自动生成一行商品，点击按钮实现数量价格自动增加
- Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解
- 【SSH网上商城项目实战17】购物车基本功能的实现
- Android-----购物车（包含侧滑删除，商品筛选，商品增加和减少，价格计算，店铺分类等）
- JavaScript实现购物车基本功能
- Android实现仿淘宝购物车增加和减少商品数量功能demo示例