简易购物车

最新推荐文章于 2025-05-29 22:11:51 发布

今天要早睡ya

最新推荐文章于 2025-05-29 22:11:51 发布

阅读量65

点赞数

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/cxc709467878/article/details/119980621

版权

这是一个HTML页面示例，展示了如何创建一个商品列表，包括商品名称、单价、颜色、库存和好评率。每个商品旁边都有一个按钮，点击可以将商品添加到购物车。购物车部分显示了已选择的商品，可以修改数量并计算总价。页面还包括一个确认支付的弹窗功能。

摘要生成于 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>
	</head>
	<style type="text/css">
	h1 {
	text-align: center;
	}

	table {
	margin: 0 auto;
	width: 60%;
	border: 2px solid #aaa;
	border-collapse: collapse;
	}

	table th,
	table td {
	border: 2px solid #aaa;
	padding: 5px;
	text-align: center;
	}

	img {
	width: 300px;
	height: 300px;
	margin-top: 40px;
	}

	#img1 {
	margin-left: 400px;
	}

	#bt {
	position: absolute;
	left: 20%;
	top: 63%;
	width: 100px;
	height: 40px;
	}
	</style>

	<body>
	<h1>商品</h1>
	<table id="stuff_table">
	<thead>
	<tr>
	<th>商品</th>
	<th>单价</th>
	<th>颜色</th>
	<th>库存</th>
	<th>好评率</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td class="name">鼠标</td>
	<td>2980</td>
	<td>黑色</td>
	<td>666</td>
	<td>98%</td>
	<td>
	<input type="button" value="加入购物车" οnclick="fun(this);" />
	</td>
	</tr>
	<tr>
	<td class="name">键盘</td>
	<td>8880</td>
	<td>白色</td>
	<td>666</td>
	<td>96%</td>
	<td>
	<input type="button" value="加入购物车" οnclick="fun(this);" />
	</td>
	</tr>
	<tr>
	<td class="name">手机壳</td>
	<td>60</td>
	<td>透明</td>
	<td>6667</td>
	<td>99.9%</td>
	<td>
	<input type="button" value="加入购物车" οnclick="fun(this);" />
	</td>
	</tr>
	<tr>
	<td class="name">耳机</td>
	<td>800</td>
	<td>蓝色</td>
	<td>666</td>
	<td>98%</td>
	<td>
	<input type="button" value="加入购物车" οnclick="fun(this);" />
	</td>
	</tr>
	<tr>
	<td class="name">手办</td>
	<td>18000</td>
	<td>金色</td>
	<td>96</td>
	<td>100%</td>
	<td>
	<input type="button" value="加入购物车" οnclick="fun(this);" />
	</td>
	</tr>
	</tbody>
	</table>
	<button id="bt" style="display: none;">刷新</button>
	<h1>购物车</h1>
	<table>
	<thead>
	<tr>
	<th>商品</th>
	<th>单价</th>
	<th>数量</th>
	<th>金额</th>
	<th>删除</th>
	</tr>
	</thead>
	<tbody id="car">
	</tbody>
	<tfoot>
	<tr>
	<td colspan="3">总计</td>
	<td id="zoi"></td>
	<td><button id="btn">结账</button></td>
	</tr>
	</tfoot>
	</table>
	<img src="img/1.jpg" alt="" id="img1" style="display: none;">
	<img src="img/2.jpg" alt="" id="img2" style="display: none;">

	</body>
	<script>
	function fun(input) {
	var fanh = input.parentElement.parentElement;
	// console.log(fanh);
	var lan = fanh.firstElementChild;
	var itm = lan.nextElementSibling;
	var tr = document.createElement("tr");
	var car = document.getElementById("car");
	tr.innerHTML = "<td>" + lan.innerHTML + "</td>" +
	"<td>" + itm.innerHTML + "</td>" +
	"<td>" +
	"<input type='button' value='-' οnclick='jisn(this);' />" +
	"<input type='text' id='num' size='1' readonly='readonly' value='1'/>" +
	"<input type='button' value='+' οnclick='jis(this);' />" +
	"</td>" +
	"<td>" + itm.innerHTML + "</td>" +
	"<td>" +
	"<input type='button' value='删除' οnclick='remove(this);'/>" +
	"</td>";
	car.append(tr);
	total();
	}
	//删除
	function remove(obj) {
	var tr = obj.parentNode.parentNode;
	var tbody = tr.parentNode;
	tbody.removeChild(tr);
	total();
	}
	//数量
	function jis(obj) {
	var num = document.getElementById("num").value;
	var itm = obj.parentNode.previousSibling;
	var money = obj.parentNode.nextSibling;
	num++;
	document.getElementById("num").value = num;
	money.innerHTML = itm.innerHTML * num;
	total();
	}
	//合计
	function jisn(obj) {
	var num = document.getElementById("num").value;
	var itm = obj.parentNode.previousSibling;
	var money = obj.parentNode.nextSibling;
	if (num > 0) {
	num--;
	document.getElementById("num").value = num;
	money.innerHTML = itm.innerHTML * num;
	} else {
	document.getElementById("num").value = 0;
	money.innerHTML = itm.innerHTML * num;
	}
	total();
	}
	//总金额
	function total() {
	var tbody = document.getElementById("car");
	var trs = tbody.getElementsByTagName("tr");
	var sum = 0;
	for (var i = 0; i < trs.length; i++) {
	var tds = trs[i].getElementsByTagName("td");
	var a = tds[3].innerHTML;
	sum += parseFloat(a);
	}
	document.getElementById("zoi").innerHTML = sum;
	}
	btn.onclick = function() {
	var mansi = zoi.innerHTML;
	var jloo = confirm(`总金额为${mansi},是否付账`);

	if (mansi == '' \|\| mansi == 0) {
	alert('请挑选物品')
	} else {
	if (jloo == true) {
	delo()
	} else {
	de()
	}
	}

	}

	function delo() {
	if (window.confirm("仅支持支付宝或者微信，下面请扫码")) {
	img1.style = 'display=block'
	img2.style = 'display=block'
	bt.style = 'display=block'
	} else {
	de()
	}
	}

	function de() {
	if (window.confirm("是否取消付款？")) {}
	}
	bt.onclick = function() {
	location.reload();
	}
	</script>

	</html>


	</head>