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

た入场券 2022-01-21 11:33 763阅读 0赞

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">+</span>
    						</td>
    						<td class="xj">3999</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/4.jpg"><span>Fujifilm/富士 instax mini 25</span></td>
    						<td class="price">4999</td>
    						<td class="count">
    							<span class="reduce">-</span>
    							<input type="text" class="count-input" value="1 " />
    							<span class="add">+</span>
    						</td>
    						<td class="xj">4999</td>
    						<td class="operation">
    							<span class="delete">删除</span>
    					</tr>
    				</tbody>		
    			</table>
    			<div class="foot" id="foot">
    				<label class="fl select_all">
    					<input type="checkbox"  class="check_all check"/>全选
    				</label>
    				<a href="#" class="fl delete" id="deleteAll">删除</a>
    				<div class="fr closing" onclick="">
    					结算
    				</div>
    				<input type="hidden" name="" id="" value="" />
    				<div class="fr total">
    					合计：￥<span id="priceTotal">0.00</span>
    				</div>
    				<div class="fr selected" id="selected">
    					已选商品<span id="selectedTotal">0</span>件
    					<span class="arrow up">︽</span>
    					<span class="arrow down">︾</span>
    				</div>
    				<div class="selected-view">
    					<div class="clearfix" id="selectViewList"><div><img src="image/1.jpg"><span>取消选择<span></div>
    				</div>
    					<span class="arrow">◆<span>◆</span></span>
    				</div>
    			</div>
    		</div>
    	</body>
    	<script type="text/javascript" src="shoppingCar.js">
    	</script>
    </html>

**css代码：**

@charset "utf-8";
    
    * {
    	margin: 0px;
    	padding: 0px;
    }
    
    body {
    	color: #666;
    	font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
    }
    
    table {
    	border-collapse: collapse;
    	/**/
    	border-spacing: 0;
    	border: 0px;
    }
    
    a {
    	color: #666;
    	text-decoration: none;
    }
    
    /* 主体 */
    /*浮动*/
    .fl {
    	float: left;
    }
    
    .fr {
    	float: right;
    }
    
    /* 清除浮动 */
    .clearfix:after {
    	content: "";
    	display: block;
    	height: 0px;
    	clear: :both;
    	visibility: hidden;
    }
    
    .clearfix {
    	display: inline-block;
    }
    
    /* 清除浮动完成 */
    .shoppingCar {
    	width: 940px;
    	margin: 100px auto;
    	/* position: absolute; */
    }
    
    .shoppingCar table {
    	text-align: center;
    	width: 100%;
    }
    
    .shoppingCar table th,
    .shoppingCar table td {
    	border: 1px solid darkgray;
    }
    
    .shoppingCar table th {
    	background-color: aqua;
    	border-top: 3px solid darkgray;
    	height: 30px;
    }
    
    .shoppingCar table td {
    	padding: 10px;
    	color: #444;
    }
    
    .shoppingCar table tbody tr:hover {
    	background: rgba(238, 246, 255);
    }
    
    .checkbox {
    	width: 60px;
    	/*定义复选框宽度*/
    }
    
    .check_all {
    	vertical-align: middle;
    	/*让复选框居中*/
    }
    
    .goods {
    	width: 300px;
    }
    
    .goods span {
    	width: 180px;
    	margin-top: 20px;
    	text-align: left;
    	float: left;
    }
    
    .goods img {
    	width: 100px;
    	height: 80px;
    	margin-right: 10px;
    	float: left;
    }
    
    .price {
    	width: 130px;
    }
    
    .count {
    	width: 90px;
    }
    
    .count input,
    .count .add,
    .count.reduce {
    	float: left;
    	margin-right: -1px;
    	position: relative;
    	z-index: 0;
    }
    
    .count .add,
    .count .reduce {
    	height: 23px;
    	width: 17px;
    	border: 1px solid darkgray;
    	background-color: white;
    	text-align: center;
    	line-height: 23px;
    	color: #444444;
    }
    
    /* .count .add{
    	float: right;
    } */
    /* .conunt.reduce{
    	float:left;
    } */
    
    .count .add:hover,
    .count.reduce:hover {
    	color: #F50;
    	z-index: 3;
    	border-color: #F60;
    	cursor: pointer;
    	/*设置鼠标点击的样式*/
    }
    
    .count input {
    	width: 50px;
    	height: 15px;
    	line-height: 15px;
    	border: 1px solid #aaa;
    	color: #343;
    	text-align: center;
    	padding: 4px 0;
    	background-color: #fff;
    	z-index: 2;
    }
    
    .xj {
    	width: 150px;
    	color: red;
    	font-weight: 700;
    }
    
    .operation span:hover,
    a:hover {
    	cursor: pointer;
    	color: red;
    	text-decoration: underline;
    }
    
    .foot {
    	margin-top: 0px;
    	color: #666;
    	height: 48px;
    	border: 1px solid #c8c8c8;
    	border-top: 0;
    	background-color: #eaeaea;
    	background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
    	position: relative;
    	z-index: 8;
    }
    
    .foot div,
    .foot a {
    	line-height: 48px;
    	height: 48px;
    }
    
    .foot .select_all {
    	width: 80px;
    	height: 48px;
    	line-height: 48px;
    	text-align: center;
    	color: #666;
    }
    
    .foot .delete {
    	padding-left: 10px;
    }
    
    .foot .closing {
    	border-left: 1px solid #C8C8C8;
    	/* border-top: ; */
    	width: 103px;
    	text-align: center;
    	color: #666;
    	font-weight: bold;
    	cursor: pointer;
    	background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
    }
    
    .foot .closing:hover {
    	background-image: linear-gradient(RGB(226, 226, 226), RGB(241, 241, 241));
    	/*线性渐变图像*/
    	color: #333;
    }
    
    .foot .total {
    	margin: 0 20px;
    	cursor: pointer;
    }
    
    .foot #priceTotal,
    .foot #selectedTotal {
    	color: red;
    	font-family: "Microsoft Yahei";
    	font-weight: bold;
    }
    
    .foot .selected {
    	cursor: pointer;
    }
    
    .foot .selected .arrow {
    	position: relative;
    	top: -3px;
    	margin-left: 3px;
    }
    
    .foot .selected .down {
    	position: relative;
    	top: 3px;
    	display: none;
    }
    
    .show .selected .down {
    	display: inline;
    }
    
    .show .selected .up {
    	display: none;
    }
    
    .foot .selected:hover .arrow {
    	color: red;
    }
    
    .foot .selected-view {
    	width: 938px;
    	border: 1px solid #c8c8c8;
    	position: absolute;
    	height: auto;
    	background: #ffffff;
    	z-index: 9;
    	bottom: 48px;
    	left: -1px;
    	display: none;
    }
    
    .show .selected-view {
    	display: block;
    }
    
    .foot .selected-view div {
    	height: auto;
    }
    
    .foot .selected-view .arrow {
    	font-size: 16px;
    	line-height: 100%;
    	color: #c8c8c8;
    	position: absolute;
    	right: 330px;
    	bottom: -9px;
    }
    
    .foot .selected-view .arrow span {
    	color: #ffffff;
    	position: absolute;
    	left: 0px;
    	bottom: 1px;
    }
    
    #selectedViewList {
    	padding: 10px 20px 10px 20px;
    }
    
    #selectedViewList div {
    	display: inline-block;
    	position: relative;
    	width: 100px;
    	height: 80px;
    	border: 1px solid #ccc;
    	margin: 10px;
    	float: left;
    }
    
    #selectedViewList div img {
    	width: 100px;
    	height: 80px;
    	margin-right: 10px;
    	float: left;
    }
    
    #selectedViewList div span {
    	display: none;
    	color: #ffffff;
    	font-size: 12px;
    	position: absolute;
    	top: 0px;
    	right: 0px;
    	width: 60px;
    	height: 18px;
    	line-height: 18px;
    	text-align: center;
    	background: #000;
    	cursor: pointer;
    }
    
    #selectedViewList div:hover span {
    	display: block;
    }

**js代码：**