js实现购物车(源码)
首先是页面布局html+css部分
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
<table id="cartTable">
<thead>
<tr>
<th><label><input class="check-all check" type="checkbox"/> 全选<label></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="data:images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="data:images/2.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="data:images/3.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="data:images/4.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<label class="f1 select-all"><input type="checkbox" class="check-all check"/> 全选</label>
<a class="f1 delete" id="deleteAll" href="javascript:;">删除</a>
<div class="fr closing">结算</div>
<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
<div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
<div class="selected-view">
<div id="selectedViewList" class="clearfix">
<div><img src="data:images/1.jpg"><span>取消选择</span></div>
</div>
<span class="arrow">◆<span>◆</span></span>
</div>
</body>
</html>
//***************************************************
* {
margin: 0;
padding: 0;
}
a {
color: #666;
text-decoration: none;
}
body {
padding: 20px;
color: #666;
}
.fl{
float: left;
}
.fr {
float: right;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
text-align: center;
width: 937px;
}
th, td {
border: 1px solid #CADEFF;
}
th {
background: #e2f2ff;
border-top: 3px solid #a7cbff;
height: 30px;
}
td {
padding: 10px;
color: #444;
}
tbody tr:hover {
background: RGB(238,246,255);
}
.checkbox {
width: 60px;
}
.goods {
width: 300px;
}
.goods span {
width: 180px;
margin-top: 20px;
text-align: left;
float: left;
}
.price {
width: 130px;
}
.count {
width: 90px;
}
.count .add, .count input, .count .reduce {
float: left;
margin-right: -1px;
position: relative;
z-index: 0;
}
.count .add, .count .reduce {
height: 23px;
width: 17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
}
.count .add:hover, .count .reduce:hover {
color: #f50;
z-index: 3;
border-color: #f60;
cursor: pointer;
}
.count input {
width: 50px;
height: 15px;
line-height: 15px;
border: 1px solid #aaa;
color: #343434;
text-align: center;
padding: 4px 0;
background-color: #fff;
z-index: 2;
}
.subtotal {
width: 150px;
color: red;
font-weight: bold;
}
.operation {
width: 80px;
}
.operation span:hover, a:hover {
cursor: pointer;
color: red;
text-decoration: underline;
}
img {
width: 100px;
height: 80px;
/*border: 1px solid #ccc;*/
margin-right: 10px;
float: left;
}
.foot {
width: 935px;
margin-top: 10px;
color: #666;
height: 48px;
border: 1px solid #c8c8c8;
background-color: #eaeaea;
background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
position: relative;
z-index: 8;
}
.foot div, .foot a {
line-height: 48px;
height: 48px;
}
.foot .select-all {
width: 100px;
height: 48px;
line-height: 48px;
padding-left: 5px;
color: #666;
}
.foot .closing {
border-left: 1px solid #c8c8c8;
width: 100px;
text-align: center;
color: #000;
font-weight: bold;
background: RGB(238,238,238);
cursor: pointer;
}
.foot .total{
margin: 0 20px;
cursor: pointer;
}
.foot #priceTotal, .foot #selectedTotal {
color: red;
font-family: "Microsoft Yahei";
font-weight: bold;
}
.foot .selected {
cursor: pointer;
}
.foot .selected .arrow {
position: relative;
top:-3px;
margin-left: 3px;
}
.foot .selected .down {
position: relative;
top:3px;
display: none;
}
.show .selected .down {
display: inline;
}
.show .selected .up {
display: none;
}
.foot .selected:hover .arrow {
color: red;
}
.foot .selected-view {
width: 935px;
border: 1px solid #c8c8c8;
position: absolute;
height: auto;
background: #ffffff;
z-index: 9;
bottom: 48px;
left: -1px;
display:none;
}
.show .selected-view {
display: block;
}
.foot .selected-view div{
height: auto;
}
.foot .selected-view .arrow {
font-size: 16px;
line-height: 100%;
color:#c8c8c8;
position: absolute;
right: 330px;
bottom: -9px;
}
.foot .selected-view .arrow span {
color: #ffffff;
position: absolute;
left: 0px;
bottom: 1px;
}
#selectedViewList {
padding: 20px;
margin-bottom: -20px;
}
#selectedViewList div{
display: inline-block;
position: relative;
width: 100px;
height: 80px;
border: 1px solid #ccc;
margin: 10px;
}
#selectedViewList div span {
display: none;
color: #ffffff;
font-size: 12px;
position: absolute;
top: 0px;
right: 0px;
width: 60px;
height: 18px;
line-height: 18px;
text-align: center;
background: RGBA(0,0,0,.5);
cursor: pointer;
}
#selectedViewList div:hover span {
display: block;
}
//js部分
/**
* Created by double
*/
window.onload = function (){
if(!document.getElementsByClassName)
document.getElementsByClassName = function(cls){
var ret = [];
var els = document.getElementsByTagName('*');
for(var i = 0, len = els.length; i < len; i++){
if(els[i].className === cls
||els[i].className.indexOf(cls) >=0
||els[i].className.indexOf(' ' + cls) >=0
||els[i].className.indexOf(' ' + cls + ' ') >=0){
ret.push(els[i]);
}
}
return ret;
}
var table = document.getElementById('cartTable'); // 购物车表格
var selectInputs = document.getElementsByClassName('check'); // 所有勾选框
var checkAllInputs = document.getElementsByClassName('check-all') // 全选框
var tr = table.children[1].rows; //行
var selectedTotal = document.getElementById('selectedTotal'); //已选商品数目容器
var priceTotal = document.getElementById('priceTotal'); //总计
var deleteAll = document.getElementById('deleteAll'); // 删除全部按钮
var selectedViewList = document.getElementById('selectedViewList'); //浮层已选商品列表容器
var selected = document.getElementById('selected'); //已选商品
var foot = document.getElementById('foot');
// 更新总数和总价格，已选浮层
function getTotal(){
var selected = 0,price = 0, html = '';
for(var i = 0; i < tr.length; i++){
if(tr[i].getElementsByTagName('input')[0].checked){
tr[i].className = 'on';
selected += parseInt(tr[i].getElementsByTagName('input')[1].value);
price += parseFloat(tr[i].getElementsByTagName('td')[4].innerHTML);
html += '<div><img src="'+tr[i].getElementsByTagName('img')[0].src+'"><span class="del" index="'+i+'">取消选择</span></div>';// 添加图片到弹出层已选商品列表容器
}
else{
tr[i].className = '';
}
}
selectedTotal.innerHTML = selected; // 已选数目
priceTotal.innerHTML = price.toFixed(2); // 总价
selectedViewList.innerHTML = html;
if (selected==0) {
foot.className = 'foot';
}
}
// 计算单行价格
function getSubtotal(tr) {
var cells = tr.cells;
var price = cells[2]; //单价
var subtotal = cells[4]; //小计td
var countInput = tr.getElementsByTagName('input')[1]; //数目input
var span = tr.getElementsByTagName('span')[1]; //-号
//写入HTML
subtotal.innerHTML = (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2);
//如果数目只有一个，把-号去掉
if (countInput.value == 1) {
span.innerHTML = '';
}else{
span.innerHTML = '-';
}
}
// 点击选择框
for(var i = 0; i < selectInputs.length; i++ ){
selectInputs[i].onclick = function () {
if (this.className.indexOf('check-all') >= 0) { //如果是全选，则吧所有的选择框选中
for (var j = 0; j < selectInputs.length; j++) {
selectInputs[j].checked = this.checked;
}
}
if (!this.checked) { //只要有一个未勾选，则取消全选框的选中状态
for (var i = 0; i < checkAllInputs.length; i++) {
checkAllInputs[i].checked = false;
}
}
getTotal();//选完更新总计
}
}
// 显示已选商品弹层
selected.onclick = function () {
if (selectedTotal.innerHTML != 0) {
foot.className = (foot.className == 'foot' ? 'foot show' : 'foot');
}
}
//已选商品弹层中的取消选择按钮
selectedViewList.onclick = function (e) {
var e = e || window.event;
var el = e.srcElement;
if (el.className=='del') {
var input = tr[el.getAttribute('index')].getElementsByTagName('input')[0]
input.checked = false;
input.onclick();
}
}
//为每行元素添加事件
for(var i = 0; i < tr.length; i++){
//将点击事件绑定到tr元素
tr[i].onclick = function(e){
var e = e || window.event;
var el = e.target || e.srcElement; //通过事件对象的target属性获取触发元素
var cls = el.className; //触发元素的class
var countInout = this.getElementsByTagName('input')[1]; // 数目input
var value = parseInt(countInout.value); //数目
//通过判断触发元素的class确定用户点击了哪个元素
switch(cls){
case 'add'://点击了加号
countInout.value = value + 1;
getSubtotal(this);
break;
case 'reduce':
if (value > 1) {
countInout.value = value - 1;
getSubtotal(this);
}
break;
case 'delete': //点击了删除
var conf = confirm('确定删除此商品吗？');
if (conf) {
this.parentNode.removeChild(this);
}
break;
}
getTotal();
}
// 给数目输入框绑定keyup事件
tr[i].getElementsByTagName('input')[1].onkeyup = function () {
var val = parseInt(this.value);
if(isNaN(val) || val <=0){
val = 1;
}
if(this.value != val){
this.value = val;
}
getSubtotal(this.parentNode.praentNode);//更新小计
getTotal();//更新总数
}
// 点击全部删除
deleteAll.onclick = function () {
if(selectedTotal.innerHTML !=0) {
var conf = confirm('确定删除所选商品吗？');
if(conf){
for(var i = 0; i < tr.length; i++){
// 如果被选中，就删除相应的行
if(tr[i].getElementsByTagName('input')[0].checked){
tr[i].parentNode.removeChild(tr[i]);//删除节点
i--;//回退下标位置
}
}
}
}
else{
alert('请选择商品！');
}
getTotal(); //更新总数
}
// 默认全选
checkAllInputs[0].checked = true;
checkAllInputs[0].onclick();
}
}
js实现购物车(源码)的更多相关文章
- PureMVC(JS版）源码解析：总结
PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写博客的过程中得到了些提升.我也是第一次写系列 ...
- PureMVC(JS版）源码解析
PureMVC(JS版)源码解析:总结 PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写 ...
- Vue.js 2.0源码解析之前端渲染篇
一.前言 Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势.前不久Vue.js 2.0正式 ...
- 从发布订阅模式入手读懂Node.js的EventEmitter源码
前面一篇文章setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop详细讲解了浏览器和Node.js的异步API及其底层原理Event Loop.本文会讲一下不 ...
- 基于wke封装的duilib的webkit浏览器控件，可以c++与js互交，源码及demo下载地址
转载请说明原出处,谢谢~~ 前些日子用wke内核封装了duilib的webkit浏览器控件,好多群里朋友私聊我希望可以我公布源码,今天把这个控件的源码和使用demo公布.其实这个控件封装起来没什么难度 ...
- PureMVC(JS版）源码解析（二）：Notification类
上篇博客,我们已经就PureMVC的设计模式进行的分析,这篇博文主要分析Notification(消息)类的实现. 通过Notification的构造函数可以看出,PureMVC中的Notificat ...
- 深入理解 Node.js 中 EventEmitter源码分析(3.0.0版本)
events模块对外提供了一个 EventEmitter 对象,即:events.EventEmitter. EventEmitter 是NodeJS的核心模块events中的类,用于对NodeJS中 ...
- js调试系列: 源码定位与调试[基础篇]
js调试系列目录: - 如果看了1, 2两篇,你对控制台应该有一个初步了解了,今天我们来个简单的调试.昨天留的三个课后练习,差不多就是今天要讲的内容.我们先来处理第一个问题:1. 查看文章下方 推荐 ...
- html5shiv.js分析-读源码之javascript系列
xiaolingzi 发表于 2012-05-31 23:42:29 首先,我们先了解一下html5shiv.js是什么. html5shiv.js是一套实现让ie低版本等浏览器支持html5标签的解 ...
随机推荐
- Android 依赖注入： Dagger 2 实例解说（一）
本文原创,转载请注明出处:http://blog.csdn.net/zjbpku ［Duplicated] link to Dagger on Android - Dagger2具体解释 关于D ...
- RBAC权限模型及数据权限扩展的实践
话说大家对RBAC权限模型应该是耳熟能详了.但真正用的好的并不多.并且原始的RBAC模型并不包括数据权限的管理,网上也差点儿没有相关的文章可以參考.本人经过几个项目的实战,在其基础上扩展出一套可行的. ...
- 安卓-APP安装后多个图标的解决
原因是在不同Activity的intent中配置了多个LAUNCHER. <intent-filter> <action android:name="android.int ...
- 取得COM对象的UUID并以string输出
IID tmp = __uuidof(ClassLibrary1::Class1); OLECHAR * buf; StringFromIID(tmp, &buf); 好像要#include ...
- [svc]后台运行程序screen or nohup
后台运行 方法1 & 方法2:screen screen –S lnmp à起个名字 进去后运行程序 Ctrl+ad à退出lnmp屏幕 Scree –ls à查看 Screen –r xxx ...
- UIWindow的一点儿思考
转自:http://www.cnblogs.com/smileEvday/archive/2012/11/16/UIWindow.html 每一个IOS程序都有一个UIWindow,在我们通过模板简历 ...
- 基于注解的ssh框架之spring配置文件
<?xml version="1.0" encoding="UTF-8"?> com.mysql.jdbc.Driver jdbc:mysql:// ...
- git使用GitHub远程仓库
1.为什么要使用远程仓库我们知道本地仓库可以很容易地实现版本控制,但在多人开发的情况下,我们需要使用一个服务器作为远程仓库.GitHub是一个开源代码库平台以及版本控制系统. 2.GitHub仓库创建 ...
- 每日英语：Yahoo's Rally: Made in China
The typical honeymoon doesn't last too long before the hard work of marriage begins. And so it norma ...
- 01、Windows Phone 套接字（Socket）实战之交互设计
这个 Demo 主要使用 WP 中提供的 Socket 对象,来与 PC 端进行文字.文件的互相传输.因为在 WP 中系统 对存储的操作限制的比较多,例如,你把 .doc..txt..zip 等常见的 ...