实现功能:
①模拟从数据库传输来的数据添加到页面。
②全选。
③单个商品删除。
④批量删除。
⑤数量增加和删除按钮。
⑥金额随数量变化。
⑦总数量随选中商品变化。
⑧总金额随商品数量变化。
使用的是底层JS,如果使用jQuery等会更简便。
先做页面HTML和css,做个假的商品栏,使用CSS添加样式。
<body>
<div id="box">
//<!-- 信息栏 -->
<div id="topbox">
<div id="allbox" class="div">
<input type="checkbox" name="全选" id="all" value="全选" />全选
</div>
<div id="information" class="div">商品信息</div>
<div class="div">单价</div>
<div class="div">数量</div>
<div class="div">金额</div>
<div class="div">操作</div>
</div>
//<!-- 店铺,商品栏 -->
<div class="shop">
<input type="checkbox" name="店铺全选" id="chall1" value="店铺全选" />
<a href="">店铺</a>
//<!-- 商品栏 -->
<ul id="ul">
//<!-- 商品 -->
<li class="shoplist">
//<!-- 多选框,商品图片 -->
<div class="imgbox">
<input type="checkbox" name="多选" class="commodity" value="" />
<div class="space"></div>
<img src="img/O1CN01RO1gOG2KyIg5AGYUr_!!654519625.jpg" alt="">
</div>
//<!-- 商品介绍 -->
<div class="text">
<a href="">【火拼价】Asus/华硕RT-AC86U双频无线AC2900M千兆路由器家用穿墙高速wifi 5g无限漏油器智能电信500M宽带ac86u华硕</a>
</div>
//<!-- 商品单价 -->
<div class="price">¥59</div>
//<!-- 商品数量 -->
<div class="numbox">
<button type="button" class="rebtn">-</button>
<input type="text" name="" class="num" value="1" />
<button type="button" class="addbtn">+</button>
</div>
//<!-- 商品金额 -->
<div class="sum">¥59</div>
//<!-- 删除商品 -->
<div>
<span>移入收藏夹</span>
<br />
<span>删除</span>
</div>
</li>
</ul>
</div>
</div>
<div id="footer">
<div id="left">
//<!-- 全选按钮 -->
<div id="allbox" class="div">
<input type="checkbox" name="全选" id="chall2" value="全选" />全选
</div>
//<!-- 批量删除 -->
<div id="del">删除</div>
</div>
<div id="right">
//<!-- 已选商品数量 -->
<div id="selected">已选商品<span id="senum">0</span>件</div>
//<!-- 已选商品合计金额 -->
<div id="total">合计(不含运费):<span id="allsum">0</span></div>
<button type="button" id="settlement">结算</button>
</div>
</div>
<script src="Shopping.js" type="text/javascript" charset="utf-8"></script>
</body>
CSS样式,模拟做出来即可
* {
margin: 0px;
padding: 0px;
list-style-type: none;
text-decoration: none;
}
#box {
min-width: 1100px;
width: 1100px;
margin: 0px auto;
}
/* 顶部说明栏 */
#topbox {
display: flex;
}
.div {
width: 120px;
}
#information {
width: 500px;
}
/* 店铺 */
.shop {
margin-top: 20px;
}
/* 商品列表 */
#ul {
margin-top: 20px;
border: 1px solid #000000;
}
#ul li {
border-bottom: 1px solid #C0C0C0;
}
.shoplist {
margin-top: 20px;
display: flex;
}
.shoplist div {
width: 120px;
}
.imgbox {
width: 120px;
display: flex;
}
.imgbox .commodity {
top: 0px;
}
.imgbox .space {
width: 10px;
height: 10px;
}
.imgbox img {
width: 80px;
}
.text {
display: block;
width: 500px !important;
}
.numbox button {
width: 20px;
}
.num {
width: 30px;
}
/* 底部 */
#footer {
min-width: 1100px;
width: 1100px;
height: 40px;
background-color: #C0C0C0;
position: fixed;
bottom: 0px;
left: 150px;
display: flex;
}
#left {
width: 500px;
display: flex;
align-items: center;
}
#right {
width: 600px;
display: flex;
justify-content: flex-end;
align-items: center;
}
#selected {
width: 150px;
}
#total {
width: 200px;
}
#settlement {
width: 80px;
height: 40px;
}
重点JS:
创建对象模拟从数据库获取的数据
var arr = [{
img: "img/O1CN01RO1gOG2KyIg5AGYUr_!!654519625.jpg",
text: "【火拼价】Asus/华硕RT-AC86U双频无线AC2900M千兆路由器家用穿墙高速wifi 5g无限漏油器智能电信500M宽带ac86u华硕",
price: 59,
num: 1
}, {
img: "img/O1CN01RO1gOG2KyIg5AGYUr_!!654519625.jpg",
text: "【火拼价】Asus/华硕RT-AC86U双频无线AC2900M千兆路由器家用穿墙高速wifi 5g无限漏油器智能电信500M宽带ac86u华硕",
price: 59,
num: 1
}, {
img: "img/O1CN01RO1gOG2KyIg5AGYUr_!!654519625.jpg",
text: "【火拼价】Asus/华硕RT-AC86U双频无线AC2900M千兆路由器家用穿墙高速wifi 5g无限漏油器智能电信500M宽带ac86u华硕",
price: 59,
num: 1
}, {
img: "img/O1CN01RO1gOG2KyIg5AGYUr_!!654519625.jpg",
text: "【火拼价】Asus/华硕RT-AC86U双频无线AC2900M千兆路由器家用穿墙高速wifi 5g无限漏油器智能电信500M宽带ac86u华硕",
price: 59,
num: 1
}];
使用for循环向ul中添加内容
for (var i = 0; i < arr.length; i++)
// 获取ul元素
var ul = document.getElementById("ul");
// 创建li节点
var li = document.createElement("li");
// 给li添加类名
li.className = "shoplist";
//添加到ul中
ul.appendChild(li);
// 创建imgbox div节点
var imgbox = document.createElement("div");
// 给imgbox添加类名
imgbox.className = "imgbox";
//添加到li中
li.appendChild(imgbox);
// 在imgbox内创建多选框节点
var commodity = document.createElement("input");
//给input添加类型
commodity.type = "checkbox";
//添加类名
commodity.className = "commodity";
//添加到imgbox中
imgbox.appendChild(commodity);
//在imgbox内创建空白div
var space = document.createElement("div");
//添加类名
space.className = "space";
//添加到imgbox中
imgbox.appendChild(space);
// 在imgbox内创建img节点
var img = new Image();
// var img=document.createElement("img");
img.src = arr[i].img;
// 添加到imgbox
imgbox.appendChild(img);
//在li内创建text文本节点
var text = document.createElement("div");
// 添加类名
text.className = "text";
// 添加到li
li.appendChild(text);
// 创建超链接节点
var a = document.createElement("a");
// 设置href属性
a.href = "";
// 获取超链接文本
a.innerHTML = arr[i].text;
// 添加到text内
text.appendChild(a)
// 创建price单价 div节点
var price = document.createElement("div");
//设置内容
price.innerHTML = "¥" + arr[i].price;
//添加到li内
li.appendChild(price);
// 创建numbox数量 div节点
var numbox = document.createElement("div");
// 添加类名
numbox.className = "numbox";
// 添加到li中
li.appendChild(numbox);
// 创建-按钮
var rebtn = document.createElement("button");
rebtn.innerHTML = "-";
// 添加类名
rebtn.className = "rebtn";
//添加到numbox
numbox.appendChild(rebtn);
// 创建文本框节点
var num = document.createElement("input");
// 设置属性
num.type = "text";
// 添加类名
num.className = "num";
num.value = arr[i].num;
//添加到numbox
numbox.appendChild(num);
//创建+按钮
var addbtn = document.createElement("button");
addbtn.innerHTML = "+";
// 添加类名
addbtn.className = "addbtn";
//添加到numbox
numbox.appendChild(addbtn);
// 创建sum总价节点
var sum = document.createElement("div");
//添加类名
sum.className="sum";
//计算价格
sum.innerHTML = "¥" + num.value * arr[i].price;
// 添加到li中
li.appendChild(sum);
// 创建操作div节点
var operation = document.createElement("div");
// 添加到li中
li.appendChild(operation);
// 创建移入span节点
var move = document.createElement("span");
//添加内容
move.innerHTML = "移入收藏夹";
// 添加到操作operation中
operation.appendChild(move);
// 创建换行节点
var br = document.createElement("br");
// 添加到操作operation中
operation.appendChild(br);
// 创建删除节点
var remove = document.createElement("span");
//添加内容
remove.innerHTML = "删除";
// 添加到操作operation中
operation.appendChild(remove);
//**************************************************************
// 单行删除
remove.onclick = function() {
this.parentNode.parentNode.remove();
// console.log(123);
//调用已选商品总数,合计金额函数
fn();
}
// ***************************************************************************
// 数量删除按钮单击事件
rebtn.onclick = function() {
//找数量
var x = Number(this.nextSibling.value);
//找单价
var p = this.parentNode.previousSibling.innerHTML;
// 截取到数字
p = p.substr(1);
if (x > 1) {
x--;
this.nextSibling.value = x;
this.parentNode.nextSibling.innerHTML = "¥" + x * p;
}
//调用已选商品总数,合计金额函数
fn();
}
// ***************************************************************************
//数量添加按钮单击事件
addbtn.onclick = function() {
//找数量
var x = Number(this.previousSibling.value);
x++;
this.previousSibling.value = x;
//找单价
var p = this.parentNode.previousSibling.innerHTML;
// 截取到数字
p = p.substr(1);
// 验证
// console.log("p=" + p);
// 将金额赋值为单价*数量
this.parentNode.nextSibling.innerHTML = "¥" + x * p;
// console.log("s="+s);
//调用已选商品总数,合计金额函数
fn();
}
效果图
效果展示
全选事件
获取全选按钮
//获取店铺全选按钮
var chall1 = document.getElementById("chall1");
var chall2 = document.getElementById("chall2");
获取商品多选框
//获取商品多选框的元素
var commodity = document.getElementsByClassName("commodity");
全选按钮点击事件
//全选按钮点击事件
chall1.onclick = chall2.onclick = function() {
//设置同时选中同时取消
if (this == chall1) {
chall2.checked = chall1.checked;
} else {
chall1.checked = chall2.checked;
}
//选中全部商品
for (var i = 0; i < commodity.length; i++) {
commodity[i].checked = chall1.checked;
}
//调用已选商品总数,合计金额函数
fn();
}
多选框全部选取时,多选按钮亮起
//选中全部商品时,全选按钮亮起
// 循环添加点击事件
for (var i = 0; i < commodity.length; i++) {
commodity[i].onclick = function() {
//计数变量,每次点击多选框都需要重新计数
var n = 0;
// 循环遍历多选框
for (var j = 0; j < commodity.length; j++) {
// 判断如果选中多选框则计数变量+1
if (commodity[j].checked) {
// 点击后计数变量+1
n++;
}
}
console.log("n=" + n)
// 判断计数变量是否与多选框的数量相等
if (n == commodity.length) {
chall1.checked = chall2.checked = true;
} else {
chall1.checked = chall2.checked = false;
}
//调用已选商品总数,合计金额函数
fn();
}
}
效果展示:
批量删除事件
// 删除选中商品
// 获取多个删除按钮元素
var del = document.getElementById("del");
del.onclick = function() {
// 循环遍历所有的多选框元素
for (var i = 0; i < commodity.length; i++) {
// 判断多选框是否选中
if (commodity[i].checked) {
commodity[i].parentNode.parentNode.remove();
i--;
}
//调用已选商品总数,合计金额函数
fn();
}
}
已选商品的数量、金额。
在数量增加、数量减少、删除时都调用该函数。
// 已选商品数量,总金额
function fn() {
// 获取已选商品总数元素
var senum = document.getElementById("senum");
// 已选商品合计金额
var allsum = document.getElementById("allsum");
// 获取已选商品
var commodity = document.getElementsByClassName("commodity");
//获取已选商品的价格
var sum = ul.getElementsByClassName("sum");
// 获取已选商品数量
var num = document.getElementsByClassName("num");
var n = 0;
var s = 0;
for (var i = 0; i < commodity.length; i++) {
if (commodity[i].checked) {
n++;
s += Number(sum[i].innerHTML.substr(1));
}
}
//已选商品总数
senum.innerHTML = n;
// 已选商品合计金额
allsum.innerHTML = "¥"+s;
}
效果展示: