Javascript实现购物车案例--Javascript学习

最新推荐文章于 2024-07-19 12:35:02 发布

落花有意，树无情

最新推荐文章于 2024-07-19 12:35:02 发布

阅读量4.5k

点赞数 3

分类专栏： # javascript

本文链接：https://blog.csdn.net/q918922703_1/article/details/91359497

版权

这篇博客通过JavaScript演示了如何设计并实现一个购物车功能，涵盖了HTML、CSS和JS代码的详细说明。

摘要由CSDN通过智能技术生成

JavaScript实现购物车来进行设计一个购物车的功能

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="shoppingCar.css"/>
		
	</head>
	<body>
		<div class="shoppingCar">
			<table id="tableShop">
				<thead>
					<tr>
						<th>
							<label><input type="checkbox" class="check_all check"></label>
							全选
						</th>
						<th>商品</th>
						<th>单价</th>
						<th>数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="checkbox"><input type="checkbox" class="check_one check"></td>
						<td class="goods"><img src="image/1.jpg"><span>Sony/索尼 DSC-WX300</span></td>
						<td class="price">1999</td>
						<td class="count">
							<span class="reduce">-</span>
							<input type="text" class="count-input" value=" 1" />
							<span class="add">+</span>
						</td>
						<td class="xj">1999</td>
						<td class="operation">
							<span class="delete">删除</span>
						</td>
					</tr>
					<tr>
						<td class="checkbox"><input type="checkbox" class="check_one check"></td>
						<td class="goods"><img src="image/2.jpg"><span>Casio/卡西欧 EX-TR350</span></td>
						<td class="price">2999</td>
						<td class="count">
							<span class="reduce">-</span>
						<input type="text" class="count-input" value="1 " />
							<span class="add">+</span>
						</td>
						<td class="xj">2999</td>
						<td class="operation">
							<span class="delete">删除</span>
					</tr>
					<tr>
						<td class="checkbox"><input type="checkbox" class="check_one check"></td>
						<td class="goods"><img src="image/3.jpg"><span>Canon/佳能 PowerShot SX50 HS</span></td>
						<td class="price">3999</td>
						<td class="count">
							<span class="reduce">-</span>
							<input type="text" class="count-input" value="1" />
							<span class="add">