一.整体效果图
(关灯下)
(开灯下)
二.HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link type="text/css" rel="stylesheet" href="/go.html?url=购物车样式.css">
<script src="购物车功能.js"></script>
</head>
<body id="body" >
<button id="kg" onclick="kz()">开灯</button>
<div id="cons">
<table id="table">
<tr>
<th>产品名称</th>
<th>产品单价</th>
<th>产品数量</th>
<th>总价</th>
</tr>
<tr>
<td>小米11</td>
<td >5000</td>
<td>
<input type="button" value="-" onclick="add(this)">
<span class="num">5</span>
<input type="button" value="+" onclick="add2(this)"><!--通过this找到点击的是谁-->
</td>
<td class="money">25000</td>
</tr>
<tr>
<td>联想Y9000</td>
<td>10000</td>
<td>
<input type="button" value="-" onclick="add(this)">
<span class="num">1</span>
<input type="button" value="+" onclick="add2(this)">
</td>
<td class="money">10000</td>
</tr>
<tr>
<td>男士护肤</td>
<td>200</td>
<td>
<input type="button" value="-" onclick="add(this)">
<span class="num">1</span>
<input type="button" value="+" onclick="add2(this)">
</td>
<td class="money">200</td>
</tr>
<tr>
<td colspan="3">总金额</td>
<td id="total">5000</td>
</tr>
</table>
</div>
</body>
</html><!D