纯js的购物车案例
1 <style>
2 table {
3 text-align: center;
4 }
5 img {
6 height: 25px;
7 width: 22px;
8 }
9 </style>
10 </head>
11 <body>
12 <table id="dataContent" border="1" cellpadding="0" cellspacing="0" width="60%" align="center">
13 <thead>
14 <tr>
15 <th>
16 <input class="checkAllOrNot" type="checkbox"> 全选
17 </th>
18 <th>商品</th>
19 <th>单价</th>
20 <th>数量</th>
21 <th>小计</th>
22 <th>操作</th>
23 </tr>
24 </thead>
25 <tbody>
26
27 </tbody>
28 <tfoot>
29 <tr>
30 <td colspan="6">
31 <input class="checkAllOrNot" type="checkbox"> 全选
32 <a href="#" onclick="return tableContent.deleteSpecifyGoods()">全部删除</a>
33 <span>已选商品：<span id="numTotal"></span>件</span>
34 <a href="#">显示或影藏</a>
35 <span>合计：<span id="priceTotal">3000.23</span></span>
36 <button>计算</button>
37 </td>
38 </tr>
39 </tfoot>
40 </table>
41
42 </body>
43
44 <script>
45 //
46
47 var bodyData = document.querySelector('#dataContent > tbody');
48 var numTotal = document.getElementById('numTotal');
49 var priceTotal = document.getElementById('priceTotal');
50
51 // 获取两个全选的checkbox
52 var checkAllOrNot = document.getElementsByClassName('checkAllOrNot');
53 var tfoot = document.querySelector('#dataContent > tfoot');
54
55 var tableContent = {
56 datas: [{id: 1, name: 'apple手机', image: 'image/iphone.jpg', price: 3000.23, num: 2},
57 {id: 2, name: '小米手机', image: 'image/iphone.jpg', price: 1999.23, num: 1},
58 {id: 3, name: '荣耀手机', image: 'image/iphone.jpg', price: 1999.23, num: 1},
59 {id: 4, name: '一加手机', image: 'image/iphone.jpg', price: 1999.23, num: 1},
60 {id: 5, name: '锤子手机', image: 'image/iphone.jpg', price: 1999.23, num: 1},
61 {id: 6, name: 'Mac Pro', image: 'image/iphone.jpg', price: 18000, num: 1}
62 ],
63 // 渲染数据, 求得商品的总数、商品的总价格
64 renderData: function() {
65 var length = this.datas.length; // 商品的种类数量
66 if(length == 0) {
67 tfoot.style.display = 'none';
68 }
69 var n = 0; //统计商品的数量
70 var p = 0; //统计商品的总价
71 for(var i = 0; i < length; i++) {
72 // 获取单件商品
73 var good = this.datas[i];
74 // 插入行
75 var row = bodyData.insertRow();
76
77 // 商品信息的第一列， 就是checkbox
78 var cbCell = row.insertCell();
79 cbCell.innerHTML = '<input onchange="checkSingleGood(this)" class="check-good" value="' + good.id + '" type="checkbox">';
80
81 var goodInfoCell = row.insertCell();
82 goodInfoCell.innerHTML = '<img src="' + good.image + '" /> ' + good.name;
83
84 var priceCell = row.insertCell(); //价格的格子
85 priceCell.innerText = good.price;
86
87 var numCell = row.insertCell(); //商品的数量格子
88 // <button onclick="tableContent.reduceNum(1)">-</button>
89 // <input value="1">
90 // <button onclick="tableContent.addNum(1)">+</button>
91 numCell.innerHTML = '<button onclick="tableContent.reduceNum('+ good.id +')">-</button>'+
92 '<input value="' + good.num + '"><button onclick="tableContent.addNum(' + good.id + ')">+</button>';
93 n += good.num;
94
95 var totalCell = row.insertCell();
96 // 做四舍五入在js中最优的方法是：Math.round(num * 100) / 100;
97 var singleGoodTotalPrice = Math.round(good.num * good.price * 100) / 100;
98 totalCell.innerText = singleGoodTotalPrice; //单个商品的总价
99 p += singleGoodTotalPrice;
100
101 var processCell = row.insertCell();
102 processCell.innerHTML = '<button onclick="tableContent.deleteGoodById(' + good.id + ')">删除</button>';
103 }
104 numTotal.innerText = n;
105 priceTotal.innerText = Math.round(p * 100) / 100;
106 },
107 // 增加指定id的商品的数量
108 addNum: function(goodId) {
109 for(var i = 0; i < this.datas.length; i++) {
110 var good = this.datas[i];
111 // 找到指定的商品，将其数量 +1, 加完了就不用往下之下
112 if(good.id == goodId) {
113 good.num++;
114 break;
115 }
116 }
117 bodyData.innerHTML = ''; // 将表格中之前的数据清空
118 this.renderData();
119 },
120 // 减少指定id的商品的数量
121 reduceNum: function(goodId) {
122 for(var i = 0; i < this.datas.length; i++) {
123 var good = this.datas[i];
124 // 找到指定的商品，将其数量 -1, 减完了就不用往下之下
125 if(good.id == goodId) {
126 // 当数量为1的时候，就直接返回
127 if(good.num == 1) {
128 return;
129 }
130 good.num--;
131 break;
132 }
133 }
134 bodyData.innerHTML = '';
135 this.renderData();
136 },
137 // 根据商品id删除对应的商品
138 deleteGoodById: function(goodId) {
139 for(var i = 0; i < this.datas.length; i++) {
140 var good = this.datas[i];
141 // 找到对应的商品，然后删除
142 if(good.id == goodId) {
143 // splice(index, num);
144 this.datas.splice(i, 1);
145 break;
146 }
147 }
148 bodyData.innerHTML = '';
149 this.renderData();
150 },
151 // 删除所有选中的商品
152 deleteSpecifyGoods: function() {
153 // console.log(this);
154 // 获取所有的商品的checkbox
155 var goodsCheckbox = document.getElementsByClassName('check-good');
156 var ids = []; // 存储的是所有的选中的商品的id
157
158 // 循环找到那些被被选中了， 被选中的checked状态为true
159 for(var i = 0; i < goodsCheckbox.length; i++) {
160 // 选中了的checkbox就获取其id
161 if(goodsCheckbox[i].checked) {
162 // 获取到 goodsCheckbox[i].value, 获取到的是字符串
163 ids.push(Number(goodsCheckbox[i].value)); // 将所有选中数据的id存储到数组中
164 }
165 }
166
167 // console.log(ids);
168
169 // 如果没有被选中的id, 就直接退出
170 if(ids.length == 0) {
171 return false;
172 }
173
174 for(var i = 0; i < this.datas.length; i++) {
175 var goodId = this.datas[i].id; //获取商品的id
176 //console.log(goodId)
177 // ids.indexOf(goodId) > -1
178 // 如果所有的被选中的id中如果包含了当前的商品的id
179 if(ids.indexOf(goodId) > -1) {
180 this.datas.splice(i, 1);
181 }
182 }
183 bodyData.innerHTML = '';
184 this.renderData();
185 return false;
186 }
187 }
188
189 /**
190 * 根据每个商品的选中决定全选按钮是否选中
191 */
192 function checkSingleGood(checkboxTag) {
193
194 var flag = true; // 假设全选checkbox是选中状态
195
196 var goodsCheckbox = document.getElementsByClassName('check-good');
197
198 for(var i = 0; i < goodsCheckbox.length; i++) {
199 // 活的到当前遍历的checkbox的状态
200 var currentStatus = goodsCheckbox[i].checked;
201 // 只要有一个没被选中，那么 "全选" 肯定是不选中状态
202 if(!currentStatus) {
203 flag = false;
204 break; // 只要找到一个，就一票否决
205 }
206 }
207
208 changeCheckAllStatus(flag);
209 }
210
211 // 改变 "全选" 的checkbox的状态, 参数接收boolean: true false
212 function changeCheckAllStatus(flag) {
213 for(var i = 0; i < checkAllOrNot.length; i++) {
214 checkAllOrNot[i].checked = flag;
215 }
216 }
217
218 // 给两个全选的 checkbox绑定onchange事件
219 for(var i = 0; i < checkAllOrNot.length; i++) {
220
221 // 获取到每一个 "全选" checkbox
222 var cAllOrNot = checkAllOrNot[i];
223 // 给每一个 "全选" checkbox 绑定索引
224 cAllOrNot.n = i;
225
226 cAllOrNot.onchange = function() {
227 // 获取到商品前的所有的checkbox
228 var goodsCheckbox = document.getElementsByClassName('check-good');
229
230 for(var j = 0; j < goodsCheckbox.length; j++) {
231 // 让所有商品前的checkbox的状态与 "全选的checkbox"的状态保持一致
232 goodsCheckbox[j].checked = this.checked;
233 }
234 // 获取到当前点击的checkbox在checkAllOrNot中的索引
235 var n = this.n;
236
237 // 如果当前点击的 "全选", 索引为0的时候，就让1和我的状态保持一致
238 // 之所以可以这么来写，原因在于 "全选"的checkbox就两个，只要让对方的状态和保持一致就可以了
239 if(n == 0) {
240 checkAllOrNot[1].checked = this.checked;
241 }
242 if(n == 1) {
243 checkAllOrNot[0].checked = this.checked;
244 }
245
246 // checkAllOrNot[1 - n].checked = this.checked;
247 }
248 }
249
250 tableContent.renderData();
251
252 /** 因为每次添加数量，减少数量，或者删除的时候，都会重新渲染.
253 var goodsCheckbox= document.getElementsByClassName('check-good');
254
255 for(var i = 0; i < goodsCheckbox.length; i++) {
256 goodsCheckbox[i].onchange = function() {
257 alert(34);
258 }
259 }
260 */
261 </script>
效果：（图片可以自己找）
纯js的购物车案例的更多相关文章
- js之购物车案例
这里主要提供思路: 一共两个页面通过原生来实现,我们需要对cookie进行封装. 在商品列表页,我们将点击添加的商品放入一个对象中,而后将该对象放入数组中,一个对象可以说就是一个商品.在购物车页面 ...
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- identity4 系列————纯js客户端案例篇[四]
前言 前面已经解释了两个案例了,通信原理其实已经很清楚了,那么纯js客户端是怎么处理的呢? 正文 直接贴例子哈. https://github.com/IdentityServer/IdentityS ...
- Vue(五) 购物车案例
这一篇把之前所学的内容做一个总结,实现一个购物车样例,可以增加或者减少购买数量,可移除商品,并且购物车总价随着你的操作实时变化. 实现效果如图: 代码: <!DOCTYPE html> & ...
- easyUI拖动购物车案例
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- jQuery 购物车案例
h1 { text-align: center; } .cart { width: 1200px; height: 600px; margin: 0 auto; border: 1px solid # ...
- Vue实战-购物车案例
Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...
- jQuery基础入门+购物车案例详解
jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...
- 纯JS实现俄罗斯方块，打造属于你的游戏帝国
纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
随机推荐
- 「实战篇」开源项目docker化运维部署-借助dockerSwarm搭建集群部署（九）
为了让学习的知识融汇贯通,目前是把所有的集群都放在了一个虚拟机上,如果这个虚拟机宕机了怎么办?俗话说鸡蛋不要都放在一个篮子里面,把各种集群的节点拆分部署,应该把各种节点分机器部署,多个宿主机,这样 ...
- Code Runner MCP Server，来了！
大家好!我是韩老师. 如果作为程序员的你,还不了解 MCP (Model Context Protocol) 的话,那韩老师劝你赶紧去补补课吧! 本文不对 MCP 进行详细介绍~ 简单来说,MCP i ...
- substring( )的两种用法？
xx.substring()括号中带的参数不一样,效果就会有很大的区别 1.xx.substring(0,2)表示取第一个和第二个字符(0,1,2表示第一.二.三个字符,含头不含尾的原则就只包含第一. ...
- [源码系列：手写spring] IOC第九节：应用上下文ApplicationContext
内容介绍 在Spring中应用上下文ApplicationContext是相较于BeanFacotry更为先进的IOC容器,BeanFacotry是Spring实现IOC最基础最核心的接口,使得Spr ...
- Java WatchService监控指定路径下的文件新增、删除和修改（子文件夹、指定文件类型）
WatchService 是 Java NIO 包 (java.nio.file) 中提供的一个用于监控文件系统变化的 API.它允许应用程序监听目录中的文件创建.修改和删除事件. 基本原理 Watc ...
- Windows Server 2012 配置 FTP
环境 Windows Server 2012 安装步骤 打开服务器管理器 管理 - 添加角色和功能 开始之前 选择安装类型 服务器选择 选择对应的服务器... 服务器角色 功能 确认 安装进度 配置步 ...
- ASP.NET 自定义DataTable数据
using System.Data; //DataTable try { DataTable dt = new DataTable(); dt.Columns.Add("Bu ...
- 一文速通Python并行计算：06 Python多线程编程-基于队列进行通信
一文速通 Python 并行计算:06 Python 多线程编程-基于队列进行通信 摘要: 队列是一种线性数据结构,支持先进先出(FIFO)操作,常用于解耦生产者和消费者.慢速生产-快速消费场景中,队 ...
- mybatis-plus.global-config.db-config.id-type=auto 和 @TableId(value = "id", type = IdType.ASSIGN_ID)哪个优先生效
对于id自动生成的方式,有注解和配置两种. 含义相同:不过设置自动增长的时候必须保证数据库中id是自增,assign_id和assign_uuid则不需要. yml配置: mybatis-plus: ...
- Asp .net core JWT验证
Jwt .wiz-editor-body .wiz-code-container { position: relative; padding: 8px 0; margin: 5px 0; text-i ...