JS实现购物车动态功能
整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。
该案例购物车主要功能如下：
1、 商品单选、全选、反选功能
2、 商品添加、删除功能
3、 商品价格自动计算
具体效果：
打开效果
添加商品数量（自动计算价格）：
取消选择：
删除商品：
商品显示与隐藏：
做这个案例呢我用了之前自己封装的框架，所以需要的小伙伴，要到我的另一篇文章里面自己下载喔，链接：https://www.cnblogs.com/xyyl/p/10912037.html
html代码：
<body onselectstart="return false;">
<template id="temp">
<tr>
<td>
<input type="checkbox" class="check" checked>
</td>
<td>
<img src="images/{src}">{txt}
</td>
<td>{price}</td>
<td>
<span class="reduce">-</span><input class="text" value="1"><span class="add">+</span>
</td>
<td>{subtotal}</td>
<td>
<span class="del">删除</span>
</td>
</tr>
</template>
<div class="box" id="box">
<table>
<thead>
<tr>
<th>
<label>
<input type="checkbox" class="checkAll check" checked>全选
</label>
</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div class="bottom" id="bottom">
<aside>
</aside>
<label>
<input type="checkbox" class="checkAll check" checked>全选
</label>
<span class="delAll">全部删除</span>
<div>已选商品：
<span class="selected" id="num">3</span>件
</div>
<a href="#" class="show">显示或隐藏</a>
<div>合计：￥
<span class="total" id="total">7000</span>
</div>
<div class="js">结算</div>
</div>
</div>
CSS代码
body {
background-color: #bcdecf;
}
div.box {
width: 700px;
margin: 50px auto 0;
}
div.box table {
border-collapse: collapse;
width: inherit;
text-align: center;
background-color: #f6f6f6;
}
div.box table td, div.box th {
border: 1px solid #999;
}
div.box th {
height: 40px;
}
div.box table tbody img {
height: 50px;
}
div.box table tbody tr span {
cursor: default;
}
div.box table tbody tr td:nth-child(2) img {
vertical-align: middle;
}
div.box table tbody tr td:nth-child(4) span {
display: inline-block;
width: 15px;
line-height: 30px;
background-color: #666;
color: #eee;
vertical-align: middle;
}
div.box table tbody tr td:nth-child(4) input {
width: 20px;
height: 20px;
outline: none;
vertical-align: middle;
text-align: center;
}
div.box table tbody tr td:nth-child(6) span {
padding: 4px 10px;
background-color: #999;
color: white;
}
div.box div.bottom {
padding: 15px 0;
margin-top: 15px;
height: 25px;
background-color: white;
display: flex;
justify-content: space-between;
position: relative;
}
div.box div.bottom span.delAll {
cursor: default;
}
div.box div.bottom div.js {
padding: 0 6px;
background-color: #00A5FF;
color: white;
margin-right: 10px;
cursor: default;
}
div.box div.bottom aside div {
display: inline-block;
}
div.box div.bottom aside div span {
position: absolute;
width: 50px;
line-height: 20px;
padding: 0 5px;
background-color: rgba(255, 255, 255, .4);
color: #333;
font-size: 10px;
margin-left: -60px;
margin-top: 20px;
transform: rotate(30deg);
cursor: pointer;
}
div.box div.bottom aside img {
height: 60px;
vertical-align: middle;
}
div.box div.bottom aside {
position: absolute;
background-color: #0a74cb;
width: 100%;
top: -70px;
padding: 5px;
box-sizing: border-box;
display: none;
}
div.box div.bottom aside.on {
display: block;
}
div.box div.bottom aside:after {
position: absolute;
content: "";
border: 10px solid transparent;
border-top-color: #0a74cb;
bottom: -19px;
right: 280px;
}
div.box div.bottom a, div.box div.bottom a:visited {
color: #0b97ff;
text-decoration: none;
}
JS代码
function $(exp){//获取元素
var el;
if (/^#\w+$/.test(exp)){
el=document.querySelector(exp);
} else {
el=document.querySelectorAll(exp);
}
return el;
}
var arr = [];/*表单的数据*/
arr[arr.length] = {src: '1.jpg', txt: 'Casio/卡西欧 EX-TR350', price: 5999.88};
arr[arr.length] = {src: '2.jpg', txt: 'Canon/佳能 PowerShot SX50 HS', price: 3888.50};
arr[arr.length] = {src: '3.jpg', txt: 'Sony/索尼 DSC-WX300', price: 1428.50};
arr[arr.length] = {src: '4.jpg', txt: 'Fujifilm/富士 instax mini 25', price: 640.60};
var temp=$('#temp').innerHTML;
var tbody=$('#tbody');
arr.forEach(function (el) {//把数据插入到HTML中
tbody.innerHTML += temp.replace("{src}", el.src).replace("{txt}", el.txt).replace("{price}", el.price)
.replace("{subtotal}", el.price);
});
var trs=$('#tbody tr');
var box=$('#box');
var aside=$('#bottom aside')[0];
box.onclick=function (ev) {
//利用事件冒泡的原理，把事件添加给父级box
var e=ev||event;
var target=e.target||e.srcElement;//获取当前点击对象
var cls=target.className;
if (cls.indexOf("check")!=-1)cls='check';
switch (cls) {
case 'add'://添加商品数量
var tr=target.parentNode.parentNode;//找到点击过那一行
var tds=tr.cells;
target.previousSibling.value++;//数量那一栏的数字加一
tds[4].innerText=(tds[2].innerText*target.previousElementSibling.value).toFixed(2);
//修改小计里面的价格
break;
case 'reduce'://减少商品数量
var tr=target.parentNode.parentNode;//找到点击过那一行
var tds=tr.cells;
if (target.nextElementSibling.value!=1) target.nextElementSibling.value--;
//数量那一栏减一
tds[4].innerText=(tds[2].innerText*target.nextElementSibling.value).toFixed(2);
//修改小计里面的价格
break;
case 'text'://直接修改数量那一栏input的值
var tr=target.parentNode.parentNode;
var tds=tr.cells;
target.onblur=function () {//失去焦点时执行
tds[4].innerText=(tds[2].innerText*this.value).toFixed(2);
this.onblur=null;//销毁事件
};
break;
case 'del': //删除商品
var tr=target.parentNode.parentNode;
if (confirm('你确定要删除吗？'))
tbody.removeChild(tr);
break;
case 'check'://复选框选择商品
chk(target);//执行复选框函数
break;
case 'delAll'://删除全部商品
if (confirm('你确定要删除吗？'))
tbody.innerHTML='';
break;
case 'show'://显示、隐藏商品
aside.classList.toggle('on');
break;
case 'cancel':
var index=target.getAttribute('data-index');
trs[index].cells[0].children[0].checked=false;
}
total();//计算价格
};
var total_all=$('#total');
var num=$('#num');
total();
function total() {//计算价格
var sum=0,number=0;
trs=$('tbody tr');
var str='';
trs.forEach(function (tr,i) {
//遍历每一行判断，将已选择商品添加到显示隐藏里面
var tds=tr.cells;
if (tds[0].children[0].checked){
sum+=parseFloat(tds[4].innerText);
number+=parseInt(tds[3].children[1].value);
str+=`<div><img src="images/${i+1}.jpg"><span class="cancel" data-index="${i}">取消选择</span></div>`
}
total_all.innerText=sum.toFixed(2);
num.innerText=number;
aside.innerHTML=str;
})
}
var checkAll=$('#box .checkAll');
function chk(target) {//复选框判断
var cls=target.className;
var flag = true;
if (cls==='check'){//点击非全选复选框
/*当存在一个复选框未选中，全选框为false*/
for (var i = 0; i < trs.length; i++) {
var checkbox = trs[i].cells[0].children[0];
if (!checkbox.checked) {
flag = false;
break
}
}
checkAll[0].checked = checkAll[1].checked = flag;
}else {//点击全选复选框，所有复选框的状态保持一致
for (var i = 0; i < trs.length; i++) {
var checkbox = trs[i].cells[0].children[0];
checkbox.checked = target.checked;
}
checkAll[0].checked = checkAll[1].checked = target.checked;
}
}
JS实现购物车动态功能的更多相关文章
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- 用vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
- Github Page+Bmob实现简单动态功能
Github Page基于jekyll能够实现简单的静态网站,但是没有提供后端服务.目前国内外也有很多提供后台服务,特别是云服务.譬如国外有AWS,记得好像是注册免费使用一年:再如Heroku,支持N ...
- JS实现购物车02
需求使用JS实现购物车功能02 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- JS实现购物车01
需求 使用JS实现购物车功能01 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue node.js商城-购物车模块
一.渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){ return { car ...
- 利用scrapy-splash爬取JS生成的动态页面
目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...
随机推荐
- 开源无广告输入法Rime
最近在看别人的博客的时候,看到别人推荐一种开源的输入法Rime.然后就下载下来一用,果然给力啊,没有广告,没有插件,很干净的输入法.比其他输入法强太多.废话少说,下面是链接https://code.g ...
- SAM4E单片机之旅——1、LED闪烁之空循环
最近因为导师要写一本关于SAME4单片机的书籍,而我也作为一个嵌入式的初学者看了这本书.现在也让我写写几个小的程序,做做示例.既然写了文档之类的,就发到博客上来吧. 目前关于这芯片能参考的书籍大概就只 ...
- tornado之运行第一个tornado程序
Tornado是使用Python编写的一个强大的.可扩展的Web服务器.它在处理严峻的网络流量时表现得足够强健,但却在创建和编写时有着足够的轻量级,并能够被用在大量的应用和工具中. 首先是安装torn ...
- OI中字符串读入和处理
OI中字符串读入和处理 在NOIP的"大模拟"题中,往往要对字符串进行读入并处理,这些字符串有可能包含空格并以\n作为分割,传统的cin >> scanf() 等等,不 ...
- Chain of Responsibility Pattern
1.Chain of Responsibility模式:将可能处理一个请求的对象链接成一个链,并将请求在这个链上传递,直到有对象处理该请求(可能需要提供一个默认处理所有请求的类,例如MFC中的Cwin ...
- 【Effective C++】设计与声明
条款18:让接口容易被正确使用,不易被误用 1,好的接口很容易被正确使用,不容易被误用.你应该在你的所有接口中努力达成这些性质. 2,“促进正使用”的办法包括接口的一致性,以及与内置类型的行为兼容. ...
- 解决Error:Unable to find method 'org.gradle.api.internal.project.ProjectInternal.
错误描述今天在Github上面下载了一份代码,然后导入到Android Studio中直接报错误 错误描述如下: Error: Unable to find method ‘org.gradle.ap ...
- 解密阿里云Redis助力双十一背后的技术
摘要: Redis是一个使用范围很广的NOSQL数据库,阿里云Redis同时在公有云和阿里集团内部进行服务,本文介绍了阿里云Redis双11的一些业务场景:微淘社区之亿级关系链存储.天猫直播之评论商品 ...
- Xcode使用的一些小技巧，值得一看。
有时我们需要对一个已有项目进行重构,改进设计,提高代码质量.以下几个Xcode 4中的功能,会使重构的工作变得轻松很多. 1.打开项目我的项目是Xcode3.x中编辑的,在用Xcode 4 打开时出现 ...
- linux系统配置之bash shell的配置（centos）
linux系统开机启动过程的最后阶段会由init进程根据启动方案(运行级:0-6)启动许多基本的服务程序,为用户提供各种各样的服务.在启动这些服务的最后会启动一个为用户提供操作环境的服务,用户就是通过 ...