css代码：
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: rgb(54, 53, 53);
}
.container {
width: 1000px;
margin: 20px auto;
}
.container .logo {
margin-bottom: 20px;
}
.container table {
width: 100%;
}
.container table tr {
line-height: 40px;
text-align: center;
}
.container table tr td,
th {
border-bottom: 1px dashed gray;
}
.container table input[type="button"] {
width: 20px;
}
.container table input[name="amount"] {
width: 40px;
text-align: center;
}
.container h3 {
text-align: right;
}
.container .total-price {
color: red;
}html文件：
<div class="container">
<div class="logo">
<img src="../../12.6 day11/课后/当当/images/dd_logo.jpg" alt="logo">
</div>
<table>
<tr>
<th>商品图片</th>
<th>商品信息</th>
<th>单价</th>
<th>数量</th>
<th style="width: 100px;">总价</th>
<th>操作</th>
</tr>
<tr>
<td><img src="../../12.6 day11/课后/当当/images/shoppingBg_03.jpg" alt=""></td>
<td>javascript高级编程</td>
<td>￥45.8</td>
<td><input type="button" name="minus" value="-"><input type="text" name="amount" value="0"><input
type="button" name="plus" value="+"></td>
<td>￥0</td>
<td>
<a href="#">移入收藏</a><br>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><img src="../../12.6 day11/课后/当当/images/shoppingBg_06.jpg" alt=""></td>
<td>css高级编程</td>
<td>￥38.8</td>
<td><input type="button" name="minus" value="-"><input type="text" name="amount" value="0"><input
type="button" name="plus" value="+"></td>
<td>￥0</td>
<td>
<a href="#">移入收藏</a><br>
<a href="#">删除</a>
</td>
</tr>
</table>
<div>
<h3>商品总价:<span class="total-price">￥0</span></h3>
</div>
</div>
JavaScript部分：
<script>
//点击加号是出现的情况
function getPlus() {
var increase = document.querySelectorAll('input[name = "plus"]') //通过querySelectorAll获取加号的元素，并赋值给increase
for (var i = 0; i < increase.length; i++) { //利用for循环遍历
increase[i].onclick = function () { //利用事件绑定写法
var amountPlus = this.previousElementSibling //通过获取元素节点的方式，获得数量的元素节点 --<input type="text" name="amount" value="0">（this表示当前点击的元素，previousElementSibling是当前元素节点的上一级元素节点）
var numberPlus = amountPlus.value //由于amountPlus是表单元素，可以直接在其后加value，获得numberPlus的值
numberPlus++ //每次点击加号的时候，numberPlusr都会进行自增
amountPlus.value = numberPlus //将自增的值返回给amountPlus.value
var minusEle = amountPlus.previousElementSibling
minusEle.removeAttribute('disabled') //5.移除disabled作用：让减号可用
//计算当点击加按钮时，出现的单个商品总价
var totalSingle = this.parentElement.previousElementSibling //通过获取元素节点的方式，获得单价的元素节点 --<td>￥45.8</td> （this表示当前点击的元素，parentElement表示当前元素的父元素，previousElementSibling是当前元素节点的上一级元素节点）
totalSingle = totalSingle.innerHTML //通过innerHTML获取totalSingle的元素内容 --￥45.8
totalSingle = totalSingle.substring(1) // 通过字符串的截取字符串方法substring（1）将￥截取掉，得到值 45.8
var totalSinglePrice = this.parentElement.nextElementSibling //通过获取元素节点的方式，获得单个商品的总价的元素节点 -- <td>￥0</td> （this表示当前点击的元素，parentElement表示当前元素的父元素，previousElementSibling是当前元素节点的下一级元素节点）
totalSinglePrice.innerHTML =`￥${(totalSingle*numberPlus).toFixed(2)}` //通过通过innerHTML获取totalSinglePrice的元素内容，即单价和次数的乘积
getTotalPricePlus()
}
}
}
//点击减号是出现的情况
function getReduce() {
var subtract = document.querySelectorAll('input[name="minus"]') //通过querySelectorAll获取减号的元素，并赋值给subtract
for (var i = 0; i < subtract.length; i++) { //利用for循环遍历
subtract[i].onclick = function () { //利用事件绑定写法
var amountSubtract = this.nextElementSibling //通过获取元素节点的方式，获得数量的元素节点 --<input type="text" name="amount" value="0">（this表示当前点击的元素，previousElementSibling是当前元素节点的下一级元素节点）
var numberReduce = amountSubtract.value //由于amountPlus是表单元素，可以直接在其后加value，获得numberReduce的值
numberReduce-- //每次点击减号的时候，numbeReduce都会进行自增
if (numberReduce <= 0) {
//减数量不可用
this.setAttribute('disabled', true) //添加disabled作用： 让减号不可用
}
amountSubtract.value = numberReduce //减一后的数量重新赋值给数量节点元素
//计算当点击减按钮时，出现的单个商品总价
var totalSingle = this.parentElement.previousElementSibling //通过获取元素节点的方式，获得单价的元素节点 --<td>￥45.8</td> （this表示当前点击的元素，parentElement表示当前元素的父元素，previousElementSibling是当前元素节点的上一级元素节点）
totalSingle = totalSingle.innerHTML //通过innerHTML获取totalSingle的元素内容 --￥45.8
totalSingle = totalSingle.substring(1) // 通过字符串的截取字符串方法substring（1）将￥截取掉，得到值 45.8
var totalSinglePrice = this.parentElement.nextElementSibling //通过获取元素节点的方式，获得单个商品的总价的元素节点 -- <td>￥0</td> （this表示当前点击的元素，parentElement表示当前元素的父元素，previousElementSibling是当前元素节点的下一级元素节点）
totalSinglePrice.innerHTML =`￥${(totalSingle*numberReduce).toFixed(2)}` //通过通过innerHTML获取totalSinglePrice的元素内容，即单价和次数的乘积
getTotalPriceReduce()
}
}
}
function getTotalPricePlus(){
var increase = document.querySelectorAll('input[name = "plus"]') //通过querySelectorAll获取加号的元素，并赋值给increase
var total = 0
for(var i = 0;i<increase.length;i++){
var totalSinglePrice = increase[i].parentElement.nextElementSibling //通过获取元素节点的方式，获得单个价值总价的元素节点-- <td>￥0</td> （this表示当前点击的元素，parentElement表示当前元素的父元素，previousElementSibling是当前元素节点的下一级元素节点）
var totalSingle = totalSinglePrice.innerHTML//通过innerHTML获取totalSinglePrice的元素内容
totalSingle = totalSingle.substring(1) // 通过字符串的截取字符串方法substring（1）将￥截取掉，得到值
total += Number(totalSingle) //通过累加的方式，获得最终的总价，注意:这里totalSingle是字符串类型，字符串与数值类型相加时会拼接，所以要将字符串转化为数值类型即Number（）方法
}
var totalPrice = document.querySelector('.total-price')
totalPrice.innerHTML = `￥${total.toFixed(2)}`
}
function getTotalPriceReduce(){
var subtract = document.querySelectorAll('input[name="minus"]') //通过querySelectorAll获取减号的元素，并赋值给subtract
var total = 0
for(var i = 0;i<subtract.length;i++){
var totalSinglePrice = subtract[i].parentElement.nextElementSibling //通过获取元素节点的方式，获得单个价值总价的元素节点-- <td>￥0</td> （this表示当前点击的元素，parentElement表示当前元素的父元素，previousElementSibling是当前元素节点的下一级元素节点）
var totalSingle = totalSinglePrice.innerHTML//通过innerHTML获取totalSinglePrice的元素内容
totalSingle = totalSingle.substring(1) // 通过字符串的截取字符串方法substring（1）将￥截取掉，得到值
total += Number(totalSingle) //通过累加的方式，获得最终的总价，注意:这里totalSingle是字符串类型，字符串与数值类型相加时会拼接，所以要将字符串转化为数值类型即Number（）方法
}
var totalPrice = document.querySelector('.total-price')
totalPrice.innerHTML = `￥${total.toFixed(2)}`
}
getPlus()
getReduce()
</script>
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
