超详细的简易购物车制作

最新推荐文章于 2024-09-26 10:30:54 发布

前端宸汐~

最新推荐文章于 2024-09-26 10:30:54 发布

阅读量340

点赞数

文章标签： html 前端 css

本文链接：https://blog.youkuaiyun.com/m0_56683232/article/details/129937755

版权

本文介绍了如何使用HTML、CSS和JavaScript实现一个简易购物车，包括商品选择、数量增减、总价计算、全选反选及删除功能。通过示例代码详细展示了实现这些功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

<!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{

margin-top: 120px;

}

</style>

</head>

<body>

<table border="1" align="center">

<thead>

<tr>

<td><input type="checkbox" id="all"></td>

<td>名称</td>

<td>价格</td>

<td align="center">数量</td>

<td>小计</td>

<td align="center">操作</td>

</tr>

</thead>

<tbody>

<tr>

<td><input type="checkbox"></td>

<td>键盘</td>

<td>500</td>

<td>

<button class="minus cal">-</button>

<input type="text" value="1">

<button class="add cal">+</button>

</td>

<td>500</td>

<td><button class="del">删除</button></td>

</tr>

<tr>

<td><input type="checkbox"></td>

<td>鼠标</td>

<td>100</td>

<td>

<button class="minus cal">-</button>

<input type="text" value="1">

<button class="add cal">+</button>

</td>

<td>100</td>

<td><button class="del">删除</button></td>

</tr>

<tr>

<td colspan="3">总计</td>

<td colspan="3" id="sumTotal"></td>

</tr>

</tbody>

</table>

<script>

//计算加减

let _cals = document.querySelectorAll(".cal");

_cals.forEach(_cal => {

_cal.onclick = function () {

//获取操作符

let opera = this.innerHTML;

//获取数量

let _input = this.parentNode.children[1];

//减1

if (_input.value * 1 <= 1 && opera == "-") {

return;

}

//执行加减

let num = eval(_input.value * 1 + opera + 1);

_input.value = num;

//计算小计

//单价

let price = this.parentNode.previousElementSibling.innerText * 1;

let total = price * num; //小计

this.parentNode.nextElementSibling.innerText = total;

//重新计算总计

sumTotal();

}

})

//全选

let _all = document.querySelector("#all"); //全选框

//所有反选框

let _chboxes = document.querySelectorAll("input[type=checkbox]:not(#all)")

_all.onchange = function () {

_chboxes.forEach(_chbox => {

_chbox.checked = this.checked;

})

//重新计算总计

sumTotal();

}

//反选

_chboxes.forEach(_chbox => {

_chbox.onchange = function () {

//获取带checked属性的所有input框

let _checkedboxes = document.querySelectorAll("input:checked:not(#all)");

_all.checked = _checkedboxes.length == _chboxes.length;

//重新计算总计

sumTotal();

}

})

//计算总计

let _sumTotal = document.querySelector("#sumTotal");

function sumTotal() {

//获取带有checked属性的小计

let _checkedboxes = document.querySelectorAll("input:checked:not(#all)");

let sumTotal = 0; //总计

_checkedboxes.forEach(_checkedbox => {

sumTotal += _checkedbox.parentNode.parentNode.children[4].innerText * 1

})

// 存放总计

_sumTotal.innerText = sumTotal;

}

//删除

let _dels = document.querySelectorAll(".del");

_dels.forEach(_del => {

_del.οnclick=function(){

if (confirm("确认删除吗?")) {

_del.parentNode.parentNode.remove();

//重新计算总计

sumTotal();

}

}

})

</script>

</body>

</html>