先上一个效果图
步骤:
① 用js语句画页面(for循环创建四个元素)
② 实现全选功能:当全选的checked
为true时,所有元素被选中(包括checked
为true和被背景变为粉色)。当全选的checked
为flase时,所有元素不被选中。当点击全选按钮时,反选按钮取消选中
③ 实现反选功能:当反选按钮被选中时,选中点击前未被选中的元素,并且全选按钮取消选中
④ 实现单选功能:当有一个元素未被选中时,全选按钮取消选中
⑤ 在window.onload=function(){}
中对各个元素进行操作(不同浏览器可能会无法获取各个元素的相关属性值)
⑥ 在实现对元素的操作时,采用的是索引对索引的方式。通过索引对元素的数量/价钱进行操作。
⑦ 在实现对元素的数量的文本框输入的功能时,需要对输入的元素进行判断(在onkeydown
事件中进行判断):若输入的值为空时,在文本框失去焦点时,其value
自动变为1。当输入的值为0时,在按完键后立刻变为1。文本框内也要限制输入英文字符(但不包括backspace
按键。)。当输入完毕时(onkeyup
事件):小计和总计值跟随着输入的数字的变化而变化
⑧ 在实现删除按钮功能时,需要对所有元素的索引值重新赋值(删除一个元素,数组的长度减一,各个元素的索引都会发生改变)
⑨ 实现⑧的方法:在删除元素后,重新遍历新的对象数组,将新的k值赋给每一个元素的value值(之前用value记录每个元素的索引值)
文本框输入数量:
//对文本框的操作
for (var i = 0; i < bEle.length; i++) {
bCountInput[i].countNum = i;
bCountInput[i].onkeydown = function (e) {
//对输入的字符进行判断,如果非数字且不是回退键,则return false(return false则不输入)
if ((e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 8) {
} else {
return false
}
};
bCountInput[i].onblur = function () {
//当文本框的值为空时,在失去焦点后变为1
if (this.value == "") {
this.value = 1;
bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "¥";
}
};
bCountInput[i].onkeyup = function () {
//当按键0时,立刻跳转为1
if (this.value == "") {
bTotal[this.countNum].innerHTML = "0¥";
} else if (this.value == 0) {
this.value = 1;
bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "¥"
} else {
bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "¥";
}
allPrice.innerHTML = cacAllPrice(bTotal)+"¥"
}
}
删除按钮:
for (var i = 0; i < bEle.length; i++) {
eleDelete[i].value = i;
eleDelete[i].onclick = function () {
bList.removeChild(bEle[this.value]);
for(var k = 0;k<bEle.length;k++){
//重新给所有对象的value/countNum赋值其对应的新的索引值
eleDelete[k].value = k;
buttonSub[k].countNum=k;
bCountInput[k].countNum=k;
buttonAdd[k].countNum=k;
}
allPrice.innerHTML = cacAllPrice(bTotal)+"¥"
}
完整代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
font-size: 14px;
}
.all {
width: 1000px;
margin: auto;
}
.b-top {
display: flex;
flex-direction: row;
background: #ffe0cb;
height: 30px;
line-height: 30px;
}
.b-info {
flex: 1;
text-align: center;
}
.b-length {
flex: 2;
}
.b-ele {
display: flex;
flex-direction: row;
height: 70px;
line-height: 70px;
padding: 10px 0;
border-bottom: 1px dashed silver;
}
.b-ele div {
text-align: center;
}
.chooseEle {
background: pink;
}
.b-button {
color: blue;
width: 60px;
height: 25px;
text-align: center;
line-height: 25px;
background: silver;
border: none;
}
.b-count-button {
width: 25px;
height: 25px;
border: none;
color: blue;
background: orange;
}
.b-count-input {
border: none;
height: 20px;
width: 25px;
outline: none;
text-align: center;
}
img {
width: 25px;
height: 25px;
}
.b-display {
display: flex;
justify-content: space-between;
}
.b-display div {
width: 120px;
height: 40px;
line-height: 40px;
}
.left {
text-align: center;
}
.right button {
width: 100%;
height: 100%;
background: red;
color: white;
text-align: center;
border: none;
}
</style>
</head>
<body>
<div class="all">
<div class="b-top">
<div class="b-info">
<input type="checkbox" class="checkAll"/>全选
</div>
<div class="b-info b-length">商品名称</div>
<div class="b-info">图片</div>
<div class="b-info">单价</div>
<div class="b-info b-length">数量</div>
<div class="b-info">小计</div>
<div class="b-info">操作</div>
</div>
<div class="b-list"></div>
<div class="b-display">
<div class="left">
<input type="checkbox" class="reverseCheck"/>反选
</div>
<div class="center">
总价:<span class="allPrice">0¥</span>
</div>
<div class="right">
<button>去结算></button>
</div>
</div>
</div>
</body>
<script>
var cart = [
{
"id": "101321XNMNSDJYE6871DAS21",
"name": "华为nova5 pro",
"src": "./cartimage/415d8ef0da06eb00.png",
"price": "1499",
"totle": "1499",
"num": 1
},
{
"id": "101321XNMNSDJYE6871DAS21",
"name": "华为nova5 pro",
"src": "./cartimage/415d8ef0da06eb00.png",
"price": "1599",
"totle": "1599",
"num": 1
},
{
"id": "101321XNMNSDJYE6871DAS21",
"name": "华为nova5 pro",
"src": "./cartimage/415d8ef0da06eb00.png",
"price": "1699",
"totle": "1699",
"num": 1
},
{
"id": "101321XNMNSDJYE6871DAS21",
"name": "华为nova5 pro",
"src": "./cartimage/415d8ef0da06eb00.png",
"price": "1799",
"totle": "1799",
"num": 1
}
];
var bTop = document.getElementsByClassName("b-top")[0];
var bList = document.getElementsByClassName("b-list")[0];
//动态创建页面
for (var i = 0; i < cart.length; i++) {
var bEle = document.createElement("div");
bEle.className = "b-ele";
bList.appendChild(bEle);
var bNode = document.createElement("div");
bNode.className = "b-info";
var bInput = document.createElement("input");
bInput.type = "checkbox";
bInput.className = "check"
bNode.appendChild(bInput);
bEle.appendChild(bNode);
var bNode = document.createElement("div");
bNode.className = "b-info b-length";
bNode.innerHTML = cart[i].name;
bEle.appendChild(bNode);
var bNode = document.createElement("div");
bNode.className = "b-info";
bNode.style.lineHeight = "80px"
var bImg = document.createElement("img");
bImg.src = cart[i].src;
bNode.appendChild(bImg);
bEle.appendChild(bNode);
var bNode = document.createElement("div");
bNode.className = "b-info b-price";
bNode.innerHTML = cart[i]["price"] + "¥";
bEle.appendChild(bNode);
var bNode = document.createElement("div");
bNode.className = "b-info b-length";
var bCountButtonSub = document.createElement("button");
bCountButtonSub.className = "b-count-button buttonSub";
bCountButtonSub.innerHTML = "-";
var bCountInput = document.createElement("input");
bCountInput.type = "text";
bCountInput.className = "b-count-input";
bCountInput.value = cart[i].num;
var bCountButtonAdd = document.createElement("button");
bCountButtonAdd.className = "b-count-button buttonAdd";
bCountButtonAdd.innerHTML = "+";
bNode.appendChild(bCountButtonSub);
bNode.appendChild(bCountInput);
bNode.appendChild(bCountButtonAdd);
bEle.appendChild(bNode)
var bNode = document.createElement("div");
bNode.className = "b-info b-total";
bNode.innerHTML = cart[i].totle + "¥";
bEle.appendChild(bNode);
var bNode = document.createElement("div");
bNode.className = "b-info";
var bCountButton = document.createElement("button");
bCountButton.className = "b-button eleDelete";
bCountButton.innerHTML = "删除";
bNode.appendChild(bCountButton)
bEle.appendChild(bNode)
}
;
//全选
var checkAll = document.getElementsByClassName("checkAll")[0];
var check = document.getElementsByClassName("check");
var bEle = document.getElementsByClassName("b-ele");
var allPrice = document.getElementsByClassName("allPrice")[0];
checkAll.onclick = function () {
for (var i = 0; i < check.length; i++) {
reverseCheck.checked = false
if (checkAll.checked == true) {
check[i].checked = true;
bEle[i].className = "b-ele chooseEle";
} else {
bEle[i].className = "b-ele";
check[i].checked = false;
}
}
};
//反选
var reverseCheck = document.getElementsByClassName("reverseCheck")[0];
reverseCheck.onclick = function () {
//输入数量
for (var i = 0; i < check.length; i++) {
check[i].checked = !check[i].checked;
if (check[i].checked == false) {
bEle[i].className = "b-ele";
checkAll.checked = false;
} else {
bEle[i].className = "b-ele chooseEle";
}
}
};
//单选
for (var i = 0; i < bEle.length; i++) {
check[i].checkValue = i;
check[i].onclick = function () {
console.log(this.checked)
if (this.checked == true) {
console.log(this.className)
bEle[this.checkValue].className = "b-ele chooseEle";
} else {
checkAll.checked = false;
bEle[this.checkValue].className = "b-ele"
}
}
}
window.onload = function (ev) {
//
var buttonSub = document.getElementsByClassName("buttonSub");
var buttonAdd = document.getElementsByClassName("buttonAdd");
var bCountInput = document.getElementsByClassName("b-count-input");
var bEle = document.getElementsByClassName("b-ele");
var bTotal = document.getElementsByClassName("b-total");
var bPrice = document.getElementsByClassName("b-price");
var eleDelete = document.getElementsByClassName("eleDelete");
var allPrice = document.getElementsByClassName("allPrice")[0];
//数量进行加减
allPrice.innerHTML = cacAllPrice(bTotal)+"¥";
for (var i = 0; i < bEle.length; i++) {
buttonSub[i].countNum = i;
buttonSub[i].onclick = function () {
if (bCountInput[this.countNum].value == 1) {
alert("该宝贝不能减少了噢!")
} else {
var value = --bCountInput[this.countNum].value;
bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, value) + "¥";
allPrice.innerHTML = cacAllPrice(bTotal)+"¥"
}
};
buttonAdd[i].countNum = i;
buttonAdd[i].onclick = function () {
var value = ++bCountInput[this.countNum].value;
bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, value) + "¥";
allPrice.innerHTML = cacAllPrice(bTotal)+"¥"
}
}
//对文本框的操作
for (var i = 0; i < bEle.length; i++) {
bCountInput[i].countNum = i;
bCountInput[i].onkeydown = function (e) {
if ((e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 8) {
} else {
return false
}
};
bCountInput[i].onblur = function () {
if (this.value == "") {
this.value = 1;
bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "¥";
}
};
bCountInput[i].onkeyup = function () {
if (this.value == "") {
bTotal[this.countNum].innerHTML = "0¥";
} else if (this.value == 0) {
this.value = 1;
bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "¥"
} else {
bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "¥";
}
allPrice.innerHTML = cacAllPrice(bTotal)+"¥"
}
}
//删除元素
console.log(bEle.length);
for (var i = 0; i < bEle.length; i++) {
eleDelete[i].value = i;
eleDelete[i].onclick = function () {
bList.removeChild(bEle[this.value]);
for(var k = 0;k<bEle.length;k++){
//重新给所有对象的value/countNum索引值
eleDelete[k].value = k;
buttonSub[k].countNum=k;
bCountInput[k].countNum=k;
buttonAdd[k].countNum=k;
}
allPrice.innerHTML = cacAllPrice(bTotal)+"¥"
}
}
}
//计算小计
function cacTotal(index, priceObj, value) {
return parseFloat(priceObj[index].innerHTML) * parseInt(value);
}
//计算总价
function cacAllPrice(bTotal) {
var totalPrice=0;
for(var i=0;i<bTotal.length;i++){
totalPrice += parseFloat(bTotal[i].innerHTML)
}
return totalPrice;
}
</script>
</html>