来做一个简陋的购物车吧。
简陋的购物车
功能呢，就是可以通过加减按钮来操作数量，同时商品的合计和下面的总计都会动态地发生变化，实现一个增减和计算的例子。
首先我们简单地写一下html：
<body>
<ul id="shopLi"></ul> <!-- 用来存放渲染出来的购物车列表 -->
<p class="addAll">总计：
<span id="allPrice"></span> <!-- 用来存放渲染出来的总金额 -->
</p>
<script src="./shopList.js"></script>
</body>
先随便虚拟一些数据，创建一个购物list数组，存放每一条对象。
let shopList = [{
id: 1,
price: 10,
count: 0
}, {
id: 2,
price: 15,
count: 0
}, {
id: 3,
price: 8,
count: 0
}]
我师父曾经说过，写方法和函数的时候要纯粹，不要管DOM怎样，要把重点放在逻辑和数据上。（现在他离职了不能继续教我了 T_T 所以要自己努力了。看到我博客的朋友如果觉得我写的方法不好或者比较冗余，一定要帮我指出呀！）
增加数量方法
这里传入了两个参数，一个是数组，一个是索引。
我的理解是增加数量是需要选出特定的某一个对象，所以传入了两个参数。
function addCount(arr, index) {
arr[index].count = arr[index].count + 1;
return arr[index].count;
}
当我执行这个方法的时候，相应对象的count+1。
减少数量方法
和增加的思路一样。
不过存在一个判断，如果数量小于等于零，就不执行这个方法了。
function minusCount(arr, index) {
if (arr[index].count <= 0) {
return false;
} else {
return arr[index].count = arr[index].count - 1;
}
}
计算单品总价方法
function countTotal(arr, index) {
let totalPrice = 0;
totalPrice = arr[index].price * arr[index].count;
return totalPrice;
}
计算所有商品的总价
function countAll(arr) {
let totalPrice = 0;
let sum = 0;
for (let i of arr) {
totalPrice = i.price * i.count;
sum = sum + totalPrice;
}
return sum;
}
方法都写好了，接下来就是页面的渲染了。
页面渲染
这一块自认为写的很繁琐，不知道原生js还有没有更好的方法呢。
let shopLi = document.getElementById("shopLi");
let inner = "";
for (let i in shopList) {
inner += (`<li class="id=${shopList[i].id}"><span class="count">\
<input type="button" value="-" class="minus">\
<span class="thisCount">${shopList[i].count}</span>\
<input type="button" value="+" class="plus">\
</span>\
<span>单价：\
<span class="price">${shopList[i].price}</span>\
</span>\
<span>合计：\
<span class="totalPrice">${countTotal(shopList, i)}</span>\
</span></li>`);
}
shopLi.innerHTML = inner;
let allPrice = document.getElementById("allPrice");
allPrice.innerHTML = countAll(shopList);
DOM操作加减
let add = document.getElementsByClassName("plus");
let minus = document.getElementsByClassName("minus");
let thisCount = document.getElementsByClassName("thisCount");
let price = document.getElementsByClassName("totalPrice");
for (let i in shopList) {
add[i].onclick = function () {
addCount(shopList, i);
thisCount[i].innerHTML = shopList[i].count;
// 重新渲染页面
price[i].innerHTML = countTotal(shopList, i);
allPrice.innerHTML = countAll(shopList);
}
minus[i].onclick = function () {
minusCount(shopList, i);
thisCount[i].innerHTML = shopList[i].count;
// 重新渲染页面
price[i].innerHTML = countTotal(shopList, i);
allPrice.innerHTML = countAll(shopList);
}
}
网友评论