用原生JavaScript做一个简单的购物车
程序员文章站
2022-05-23 08:38:10
...
用原生JavaScript做一个简单的购物车
前言：
本文由简易HTML+CSS+JavaScript构成，本文图片可自己修改。
（img内容不上传）
实现功能：
- 将商品添加到购物车（如果购物车有相同物品则累加对应数量）
- 小计计算与总和
- 积分计算与总和
- 实现数量的增加和减少（并同步小计和积分及其总和）
- 单个商品删除
- 批量删除
实现效果：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div id="shop">
<ul>
<li>
<a href="#" onclick="addToCart(this);">
<img src="img/a.jpg" height="100" width="100"/><br />
<span class="price">4999.00</span>¥<br />
添加至购物车
</a>
</li>
<li>
<a href="#" onclick="addToCart(this);">
<img src="img/b.jpg" height="100" width="100"/><br />
<span class="price">1999.00</span>¥<br />
添加至购物车
</a>
</li>
<li>
<a href="#" onclick="addToCart(this);">
<img src="img/c.jpg" height="100" width="100"/><br />
<span class="price">3999.00</span>¥<br />
添加至购物车
</a>
</li>
<li>
<a href="#" onclick="addToCart(this);">
<img src="img/d.jpg" height="100" width="100"/><br />
<span class="price">999.00</span>¥<br />
添加至购物车
</a>
</li>
<li>
<a href="#" onclick="addToCart(this);">
<img src="img/e.jpg" height="100" width="100"/><br />
<span class="price">5666.00</span>¥<br />
添加至购物车
</a>
</li>
</ul>
</div>
<div id="info-table">
<h1>购物车</h1>
<table id="mytable" width="1200" align="center">
<tr>
<th><input type="checkbox" id="allCheck" onclick="selectAll()"/>全选</th>
<th>店铺宝贝</th>
<th>获积分</th>
<th>单价(元)</th>
<th>数量</th>
<th>小计(元)</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td class="imgbackground"><img src="img/a.jpg" height="100" width="100"/></td>
<td class="integral">249</td>
<td>4999.00</td>
<td>
<button onclick="reduce(this)">-</button>
<input type="text" size="1" readonly="true" value="1"/>
<button onclick="plus(this)">+</button>
</td>
<td class="shopCount">0</td>
<td><a href="#" class="delete" onclick="deleteChild(this)">删除</a></td>
</tr>
</table>
</div>
<div id="info-input">
<div class="total-div">
<span>商品总价(不含运费)：<span id="resultTotalMoney">0</span>元</span>
</div>
<div class="btorinter-div">
<button onclick="selectDelete()" class="btdelete">删除所选</button>
<span class="viewIntegral">可获积分：<span id="integralTotal">0</span>点</span>
</div>
<div>
<button class="btbuy" onclick="buyNow()">立即购买</button>
</div>
</div>
</div>
</body>
</html>
CSS部分：
#info-table{text-align: center;}
#info-input{width: 1200px;margin: 0px auto;}
#info-input>div{
width: 1200px;
margin: 20px 0px;
}
.shopCount{color: orange;}
a{text-decoration: none;color: deepskyblue;}
#resultTotalMoney,#integralTotal{color: orange;}
.total-div{text-align: right;}
.btdelete{float: left;}
.btorinter-div{height: auto;overflow: auto;}
.viewIntegral{float: right;}
.btbuy{background-color: orange;color: white;border: 0px;float: right;}
#shop{
width: 800px;margin: 0px auto;
height: auto;
overflow: auto;
}
#shop li{
text-align: center;
list-style: none;
float: left;
height: auto;
overflow: auto;
margin: 20px;
}
#shop a{
display: block;
height: auto;
overflow: auto;
}
.price{color: red;}
JavaScript部分：
<script type="text/javascript">
// 全选
function selectAll(){
var obj = document.getElementsByClassName("selectOne");
var btSelectAll = document.getElementById("allCheck").checked;
for(inputCheck of obj){
inputCheck.checked = btSelectAll;
}
}
// 单个删除
function deleteChild(obj){
var nowtr = obj.parentElement.parentElement;
var nowtable = nowtr.parentElement;
nowtable.removeChild(nowtr);
// 总价
allShopPriceTotal();
// 总积分
allIntegralTotal();
}
// 批量删除
function selectDelete(){
var obj = document.getElementsByClassName("selectOne");
for (var i = obj.length - 1;i >= 0;i--){
var nowCheck = obj[i];
if (nowCheck.checked == true){
deleteChild(nowCheck);
}
}
// 总价
allShopPriceTotal();
// 总积分
allIntegralTotal();
}
// 减少数量
function reduce(obj){
var textElement = obj.parentElement.children[1];
if (textElement.value == "1"){
return;
}
textElement.value = eval(textElement.value + "-1");
// 小计
var singelSumElement = obj.parentElement.parentElement.children[5];
singleSubTotal(singelSumElement);
// 总价
allShopPriceTotal();
// 总积分
allIntegralTotal();
}
// 增加数量
function plus(obj){
var textElement = obj.parentElement.children[1];
textElement.value = eval(textElement.value + "+1");
// 小计
var singelSumElement = obj.parentElement.parentElement.children[5];
singleSubTotal(singelSumElement);
// 总价
allShopPriceTotal();
// 总积分
allIntegralTotal();
}
// 初始化全部商品小计
function singleAllSubTotal(){
var obj = document.getElementsByClassName("shopCount");
for(shopCount of obj){
singleSubTotal(shopCount);
}
}
// 计算单个商品的小计
function singleSubTotal(obj){
var price = obj.parentElement.children[3].innerHTML;
var count = obj.parentElement.children[4].children[1].value;
obj.innerHTML = eval(price + "*" + count);
}
// 所有商品的总价钱
function allShopPriceTotal(){
var obj = document.getElementById("resultTotalMoney");
var allSingelSubElement = document.getElementsByClassName("shopCount");
var sum = "0";
for (singelSubElement of allSingelSubElement){
if (sum != ""){
sum += "+";
}
sum += singelSubElement.innerHTML;
}
obj.innerHTML = eval(sum);
}
// 可得积分总和
function allIntegralTotal(){
// 总积分
var obj = document.getElementById("integralTotal");
// 单个积分
var allSingelIntegralElement = document.getElementsByClassName("integral");
// 计算集
var sum = "0";
for (singelIntegralElement of allSingelIntegralElement){
// 数量
var count = singelIntegralElement.parentElement.children[4].children[1].value;
if (sum != ""){
sum += "+";
}
sum += singelIntegralElement.innerHTML + "*" + count;
}
obj.innerHTML = eval(sum);
}
// 立即购买
function buyNow(){
var result = confirm("是否全部购买！");
if (result == false){
return
}
var obj = document.getElementById("mytable");
obj.innerHTML = "";
// 总价
allShopPriceTotal();
// 总积分
allIntegralTotal();
alert("购买成功！");
}
// 添加到购物车
function addToCart(obj){
var result = confirm('是否将此商品添加至购物车？');
if (result == false){
return;
}
// 购物车表格
var cartBox = document.getElementById("mytable");
// 商品对象
var shop = {
shopImg:obj.children[0].src,
shopIntegral:parseInt(eval(obj.children[2].innerHTML + "/20")),
shopPrice:obj.children[2].innerHTML
}
// 判断商品是否存在
var img = document.getElementsByClassName("imgbackground");
var result = "-1";
for (var i = 0;i < img.length;i++){
if (shop.shopImg == img[i].children[0].src){
result = i;
}
}
if (result != "-1"){
var count = img[result].parentElement.children[4].children[1];
count.value = eval(count.value + "+1");
// 重新计算小计
singleAllSubTotal();
}else{
// 创建购物车对象
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = '<input type="checkbox" class="selectOne" />';
var td2 = document.createElement("td");
td2.className = "imgbackground";
td2.innerHTML = '<img src="'+ shop.shopImg +'" height="100" width="100"/>';
var td3 = document.createElement("td");
td3.className = "integral";
td3.innerHTML = shop.shopIntegral;
var td4 = document.createElement("td");
td4.innerHTML = shop.shopPrice;
var td5 = document.createElement("td");
td5.innerHTML = '<button οnclick="reduce(this)">-</button> '
+ '<input type="text" size="1" readonly="true" value="1"/>'
+ ' <button οnclick="plus(this)">+</button>';
var td6 = document.createElement("td");
td6.className = "shopCount";
td6.innerHTML = parseInt(shop.shopPrice);
var td7 = document.createElement("td");
td7.innerHTML = '<a href="#" class="delete" οnclick="deleteChild(this)">删除</a>';
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
tr.appendChild(td7);
// 添加到购物车
cartBox.appendChild(tr);
}
// 总价
allShopPriceTotal();
// 总积分
allIntegralTotal();
// 改变颜色
changeBackground();
}
// 鼠标移动改变背景颜色
function changeBackground(){
var imgtd = document.getElementsByClassName("imgbackground");
for (singeltd of imgtd){
singeltd.onmousemove = function(){
this.style.backgroundColor = "orange";
}
singeltd.onmouseleave = function(){
this.style.backgroundColor = "white";
}
}
}
// 初始化界面内容
window.onload = function(){
changeBackground();
singleAllSubTotal();
allShopPriceTotal();
allIntegralTotal();
}
</script>
下一篇： 过滤器 Filter