js实现一个简单的购物车功能
文章目录
-
- 概要
- html代码
- css代码
- js代码
- 小结
概要
可以进行全选，不全选，加购物车选定的数量，以及添加购物车的内容，以及前面功能实现时可以同步计算总价格。
html代码
简单的html构架一个购物车样式的页面，代码如下：
{txt}
{price}
-+
{subtotal}
删除
商品
单价
数量
小计
操作
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 += `
取消选择`
}
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;
}
}小结
想要实现一个购物车的功能呢，要想好思路，以及你要考虑好实现的功能的问题。