<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<table>
<thead>
<caption>
商品
</caption>
</thead>
<tbody>
<tr>
<td>炸鸡</td>
<td>28元</td>
<td><button id="zjtaiduola">-</button></td>
<td><span id="zjsl">0</span></td>
<td><button id="zjtaishaola">+</button></td>
</tr>
<tr>
<td>可乐</td>
<td>5元</td>
<td><button id="kltaiduola">-</button></td>
<td><span id="klsl">0</span></td>
<td><button id="kltaishaola">+</button></td>
</tr>
<tr>
<td>总价：</td>
<td><span id="total">0</span></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 补全代码
var kltaiduola = document.querySelector("#kltaiduola");
var kltaishaola = document.querySelector("#kltaishaola");
var klsl = document.querySelector("#klsl");
var zjtaiduola = document.querySelector("#zjtaiduola");
var zjtaishaola = document.querySelector("#zjtaishaola");
var zjsl = document.querySelector("#zjsl");
var total = document.querySelector("#total");
kltaiduola.onclick = function () {
if (klsl.innerHTML > 0) {
klsl.innerHTML = parseInt(klsl.innerHTML) - 1;
}
count();
}
kltaishaola.onclick = function () {
klsl.innerHTML = parseInt(klsl.innerHTML) + 1;
count();
}
zjtaiduola.onclick = function () {
if (zjsl.innerHTML > 0) {
zjsl.innerHTML = parseInt(zjsl.innerHTML) - 1;
}
count();
}
zjtaishaola.onclick = function () {
zjsl.innerHTML = parseInt(zjsl.innerHTML) + 1;
count();
}
function count() {
total.innerHTML = 28 * parseInt(zjsl.innerHTML) + 5 * parseInt(klsl.innerHTML);
}
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
