主要是进行购物车的功能实现，先搭建框架，然后运用模板字符串渲染好页面，设置样式，接下来就是重点的功能部分，通过循环设置了button的点击事件，使用关键字this,对发生了点击事件的元素旁边的input元素的value进行++，或者--，在进行商品数量减少注意初始的时候可以设置—不可以用，disabled，当代表+的button发生点击的时候，取消disabled，当数量小于0的时候，该按钮也是disabled，在进行计算商品总价的时候，注意，应该是点击之后，去获取每个商品的总价，然后相加，具体看代码：
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 1200px;
margin: 0 auto;
text-align: center;
}
tr,
th,
td {
border-bottom: 1px solid black;
}
img {
width: 100px;
height: 100px;
}
.logo {
margin-left: 200px;
width: 200px;
}
</style>
</head>
<body>
<!-- <table>
<tr>
<th>商品图片</th>
<th>商品信息</th>
<th>商价</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</tr>
<tr>
<td><img src="" alt=""> </td>
<td></td>
<td></td>
<td> <button type="button"> - </button><input type="text"><button type="button" > + </button> </td>
<td></td>
<td> <br><span></span> </td>
</tr>
</table> -->
<script>
var productList = [{
id: 1001,
name: 'js高级编程',
url: 'https:img1.baidu.com/it/u=454394458,1998378568&fm=253&fmt=auto&app=138&f=JPEG',
price: 68.90,
num: 0,
singlePrice: 0,
state: false
},
{
id: 1002,
name: 'css高级编程',
url: 'https:img1.baidu.com/it/u=337910016,91561566&fm=26&fmt=auto',
price: 55.89,
num: 0,
singlePrice: 0,
state: false
},
{
id: 1003,
name: 'html高级编程',
url: 'https:img1.baidu.com/it/u=337910016,91561566&fm=26&fmt=auto',
price: 45.89,
num: 0,
singlePrice: 0,
state: false
}
]
init = ` <img src="images/dd_logo.jpg" alt="" class='logo'> <table>
<tr>
<th>商品图片</th>
<th>商品信息</th>
<th>商价</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</tr>
`
productList.forEach(function (item) {
init = init + ` <tr><td><img src="${item.url}" alt=""> </td>
<td>${item.name}</td>
<td>${item.price}</td>
<td> <button type="button" class="left"> - </button><input type="text"><button type="button" class="right"> + </button> </td>
<td class='all'>${item.singlePrice}</td>
<td>${item.state} <br><span>删除</span> </td> </tr>`
})
var str = init + ` <tr class='last'></tr></table> `
document.write(str)
// 功能
function jiSuan(){
var butRight = document.querySelectorAll('.right')
var butLeft = document.querySelectorAll('.left')
for (var i = 0; i < butRight.length; i++) {
butRight[i].onclick = function () {
this.previousElementSibling.value++
this.previousElementSibling.previousElementSibling.removeAttribute('disabled')
// 计算单个商品总价格
var singlePrice = this.parentElement.previousElementSibling.innerHTML
var tallP = this.parentElement.nextElementSibling
var tallprice = singlePrice * this.previousElementSibling.value
tallP.innerHTML = tallprice.toFixed(2)
sum1()
}
}
for (var i = 0; i < butLeft.length; i++) {
butLeft[i].setAttribute('disabled', 'ture')
butLeft[i].onclick = function () {
this.nextElementSibling.value--
if (this.nextElementSibling.value == 0) {
// alert('商品都负数啦')
this.setAttribute('disabled', 'ture')
}
// 计算单个商品总价格
var singlePrice = this.parentElement.previousElementSibling.innerHTML
var tallP = this.parentElement.nextElementSibling
var tallprice = singlePrice * this.nextElementSibling.value
tallP.innerHTML = tallprice.toFixed(2)
sum1()
}
}
}
// 计算商品总价格
function sum1(){
var singlepAll = document.querySelectorAll('.all')
console.log(singlepAll)
var sum = 0
for (var i = 0; i < singlepAll.length; i++) {
console.log(singlepAll[i].innerHTML)
sum += Number(singlepAll[i].innerHTML)
}
var lastP = document.querySelector('.last')
lastP.innerHTML = sum.toFixed(2)
}
jiSuan()
// 删除选项，也就是那一行Li
function dele(){
var spanE=document.querySelectorAll('span')
for(var i=0;i<spanE.length;i++ ){
spanE[i].onclick=function(){
console.log(666);
this.parentElement.parentElement.remove()
}
}
}
dele()
</script>
</body>
</html>
