javascript 实现购物车页面
跟商城有关系的网站，难免会有购物车的结账界面。
我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。
欢迎指点！~
效果如图：
用到的素材：加号 减号 商品图 删除图标 选中的图标和没选中的图标
代码：
<body onselectstart="return false;" style="-moz-user-select:none;">
<table>
<thead>
<tr>
<th><input type="checkbox"></th>
<th>商品信息</th>
<th>数量</th>
<th>单价<span>（元）</span></th>
<th>金额<span>（元）</span></th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>
<img src="./cart/good.png">
<p>小呀小苹果（一）</p>
</td>
<td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>
<td class="per">￥<span>1900</span></td>
<td class="money">￥<span>3800</span></td>
<td><a class="del"></a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<img src="./cart/good.png">
<p>小呀小苹果（二）</p>
</td>
<td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>
<td class="per">￥<span>1900</span></td>
<td class="money">￥<span>3800</span></td>
<td><a class="del"></a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<img src="./cart/good.png">
<p>小呀小苹果（三）</p>
</td>
<td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>
<td class="per">￥<span>1900</span></td>
<td class="money">￥<span>3800</span></td>
<td><a class="del"></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>已选：<span class="choosen">0</span>件 共<span class="total">0</span>元</td>
<td></td>
<td></td>
<td></td>
<td><button class="sure">结账</button></td>
</tr>
</tfoot>
</table>
</body>
*{ margin: 0;padding: 0;list-style: none;font-size: 16px;font-family: 'arial';font-weight: normal; }
table{ width: 1020px;margin: 0 auto;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;text-align: center; }
table tr{ height: 100px;line-height: 100px; }
thead{ background: black;color: white; }
thead tr,tfoot tr{ height: 40px;line-height: 40px; }
table img{ float: left;width: 65px;height: 65px;margin-top: 18px; }
table input[type="checkbox"]{ width: 32px;height: 32px;-webkit-appearance: none;background: url(./cart/checkbox.png) no-repeat center center;vertical-align:middle }
tbody td:nth-child(1){ width: 7%; }
tbody td:nth-child(2){ width: 35%; }
tbody td:nth-child(3){ width: 13%; }
tbody td:nth-child(4){ width: 15%; }
tbody td:nth-child(5){ width: 15%; }
tbody td:nth-child(6){ width: 15%; }
tbody tr{ border-bottom: 1px solid black; }
table .add,table .dec,table .del{ display: inline-block;width: 14px;height: 21px;cursor: pointer; }
table .add{ background: url(./cart/add.png) no-repeat center center; }
table .dec{ background: url(./cart/dec.png) no-repeat center center; }
table .num{ display: inline-block;width: 57px;margin: 0 18px;height: 39px;line-height: 39px;border: 1px solid #b0b0b0;background: #d4d4d4; }
table .del{ width: 18px;background: url(./cart/del.png) no-repeat; }
table .money,table .total{ color: red; }
table .choosen{ color: #3083ff; }
table .sure{ width: 100%;height: 100%;background: #3083ff;color: #fff;border: none;cursor: pointer; }
input[type='checkbox']:checked{ background: url(./cart/check.png) no-repeat center center; }
window.onload = function(){
// 按顺序为：list个数 加 数量 减 删 选择框 金额 单价 选中的个数
// list个数 不包括thead
var oListNumber = document.getElementsByClassName('add').length;
var oAdds = document.getElementsByClassName('add');
var oNums = document.getElementsByClassName('num');
var oDecs = document.getElementsByClassName('dec');
var oDels = document.getElementsByClassName('del');
var oInputs = document.getElementsByTagName('input');
var oMoneys = document.getElementsByClassName('money');
var oPers = document.getElementsByClassName('per');
var oAllChecked = false; //全选
var othercheckbox =0; //除了全选以外的其他checkbox
changeMoney();
// checkbox点击事件
for(var i =0;i<oInputs.length;i++){
(function(i){
oInputs[i].onclick = function(){
// 判断除了全选以外的checkbox
if(i!=0){
if(oInputs[i].checked ==true){
othercheckbox++
}else{
othercheckbox--
}
}
// 判断是否全选
if(othercheckbox == oListNumber){
oInputs[0].checked = true;
}else{
oInputs[0].checked = false;
}
// 判断是否选择了全选checkbox
if(i==0){
oAllChecked = !oAllChecked;
for(var j=0;j<oInputs.length;j++){
oInputs[j].checked=oAllChecked;
}
if(oAllChecked){
othercheckbox = oListNumber
}else{
othercheckbox = 0;
}
}
changeTotal()
}
})(i)
}
// add事件
for(var i =0;i<oAdds.length;i++){
(function(i){
oAdds[i].onclick = function(){
oNums[i].innerText = parseInt(oNums[i].innerText) +1;
changeMoney()
changeTotal()
}
})(i)
}
// dec事件
for(var i =0;i<oDecs.length;i++){
(function(i){
oDecs[i].onclick = function(){
if(oNums[i].innerText != '0'){
oNums[i].innerText = parseInt(oNums[i].innerText) -1;
}
changeMoney()
changeTotal()
}
})(i)
}
// add事件和dec事件伴随的金额改变事件
function changeMoney(){
var oPerSpan =[]; //单价
var oMoneySpan=[]; //金额
for(var i=0;i<oListNumber;i++){
oPerSpan[i] = oPers[i].getElementsByTagName('span')[0].innerText;
oMoneySpan[i] = oMoneys[i].getElementsByTagName('span')[0];
oMoneySpan[i].innerText = (parseInt(oNums[i].innerText)*parseInt(oPerSpan[i]))
}
}
// del事件
for(var i =0;i<oDels.length;i++){
(function(i){
oDels[i].onclick = function(){
var thisdom = oDels[i].parentNode.parentNode;
var tbody = thisdom.parentNode;
tbody.removeChild(thisdom)
changeTotal()
}
})(i)
}
// 总数量 总金额
function changeTotal(){
var oChoosen = document.getElementsByClassName('choosen')[0];
var oTotal = document.getElementsByClassName('total')[0];
var sumNUM = 0
var sumTOTAL =0
for(var i=1;i<oInputs.length;i++){
if(oInputs[i].checked){
sumNUM = parseInt(oNums[i-1].innerText) + parseInt(sumNUM);
sumTOTAL = parseInt(oMoneys[i-1].getElementsByTagName('span')[0].innerText) +parseInt(sumTOTAL)
}
}
oChoosen.innerText = sumNUM;
oTotal.innerText = sumTOTAL;
}
}
javascript 实现购物车页面的更多相关文章
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- FineUI小技巧（1）简单的购物车页面
起因 最初是一位 FineUI 网友对购物车功能的需求,需要根据产品单价和数量来计算所有选中商品的总价. 这个逻辑最好在前台使用JavaScript实现,如果把这个逻辑移动到后台C#实现,则会导致过多 ...
- 前端Vue项目——购物车页面
一.加入购物车的两种策略 1.加入购物车接口 在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) ...
- 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- javascript实现当前页面截屏
javascript实现当前页面截屏 一.前言 有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果.比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存.但又不能安装任 ...
- 使用javascript实现html页面直接下载网盘文件
公司新建一网站,用的是商派的易开店系统.设计方案中有一个是下载文件的功能,但易开店不支持上传资源,所以无法下载本站资源. 于是想到了网盘资源下载,有些网站是把页面链接到网盘资源文件下载页面,进行二次跳 ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- HTML里的哪一部分Javascript 会在页面加载的时候被执行？
最近遇到一个问题:HTML里的哪一部分Javascript 会在页面加载的时候被执行()A : 文件头部 B : 文件尾 C : <head>标签部分 D : <body>标签 ...
随机推荐
- popen和system问题
popen和system问题 1. 问题描述 C的代码里面去调用命令启动一个shell脚本,分别使用了下面两个途径. 其中一个是: func1(cmd) { popen(cmd,type); pclo ...
- LeetCode - 66. Plus One(0ms)
Given a non-empty array of digits representing a non-negative integer, plus one to the integer. The ...
- Halcon和Opencv区别
Halcon:机器视觉行业里知名的商业视觉库,非开源的,在国内市场份额处于第一,其提供了1500个多个API算子供开发人员使用,有些编程基础的都可以轻松的入门,其调试也是很方便的,断点单步运行,图像变 ...
- 成为IT精英，我奋斗7年【转】
这些日子 我一直在写一个实时操作系统内核,已有小成了,等写完我会全部公开,希望能够为国内IT的发展尽自己一份微薄的力量.最近看到很多学生朋友和我当年一样没 有方向 ,所以把我的经历写出来与大家共勉,希 ...
- 另外一种C#多选下拉框
链接: https://pan.baidu.com/s/1tnLgC9P_V8y9qHTYSg8xGA 密码: cwxj
- centos7 centos6中 更改默认的系统启动级别
centos6中更改默认的启动级别 方法: 1.vi /etc/inittab 2.找到id:x:initdefault:,我的系统是id:3:initdefault:,即默认以字符模式启动. 3.将 ...
- laydate日期控件
<!-- laydate 日期时间控件 下载地址 http://www.layui.com/laydate/ 这里用到版本为 layDate-v5.0.2 下载后将 laydate 文件夹放到项 ...
- HighCharts中几种tooltip的显示格式
推荐学习地址 => https://www.hcharts.cn/docs/basic-tooltip https://api.hcharts.cn/#Highcharts.numberFo ...
- Flink之状态之checkpointing
1.前言 在Flink中,函数和操作符都可以是有状态的.在处理每个消息或者元素时,有状态的函数都会储存信息,使得状态成为精密操作中关键的组成部分. 为了使状态能够容错,Flink会checkpoint ...
- 关于如何利用原生js动态给一个空对象添加属性以及属性值
首先,回忆一下,访问对象属性一共有两种方法:点获取法和方括号获取法.而我们最常用的就是点获取法了.但是当我们遇到需要给对象动态添加属性和属性值时,点获取法好像就不太好用了,尤其是我们不知道属性名的时候 ...