JavaScript開發(fā)購物車之購物車功能完整代碼
本節(jié)展示JavaScript開發(fā)購物車之購物車功能完整代碼。
通過引用我們創(chuàng)建好的4個(gè)JS文件，在頁面中完整的實(shí)現(xiàn)購物車的各項(xiàng)功能。
我們創(chuàng)建了list.php文件用來進(jìn)行商品展示，cookie.js文件操作cookie，
index.js文件操作列表頁，server.js操作本地?cái)?shù)據(jù)模塊。
cart.php文件顯示購物車頁面，cart.js文件操作購物車。
完整的商品列表頁list.php代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>商品列表頁面</title>
<!--商品列表樣式表-->
<style>
h2{
text-align: center;
}
a{
text-decoration: none;
}
.mycar{
border: 1px solid #d4d4d4;
width: 160px;
background-color: #d4d4d4;
font-family: 微軟雅黑,宋體;
}
dl{
float: left;
border: 1px solid #d4d4d4;
margin-left: 10px;
margin-top: 20px;
}
.m1{
margin-left: 35%;
font-family: 微軟雅黑,宋體;
font-size: 16px;
font-weight: bolder;
display: block;
}
.m2{
font-size: 10px;
color: #0000FF;
margin-top: 3%;
margin-left: 33%;
display:block;
line-height: 14px;
}
.m3{
color: red;
font-weight: bolder;
font-size: 18px;
display: block;
line-height: 14px;
text-align: left;
}
.m4{
background-color: crimson;
font-weight: bolder;
color: white;
display: block;
line-height: 14px;
margin-left: 30%;
}
@media only screen and (min-width: 410px){
dl{
margin: 20px 8px;
}
}
@media only screen and (min-width: 350px) and (max-width: 410px){
dl{
margin: 20px 8px;
}
}
}
@media only screen and (max-width: 350px){
dl{
margin: 20px 8px;
}
}
</style>
<!--cookie操作的js庫-->
<script src="cookie.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container" >
<h2>商品展示列表</h2>
<div class="mycar">
<a href="cart.php">我的購物車</a><i style="margin-left: 10px; color: red; font-weight: bolder;" id="ccount">0</i>
</div>
<div class="list">
<dl pid="1001">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg"/>
</dt>
<dd class="m1">智能手表</dd>
<dd class="m2">純機(jī)械，超酷表帶</dd>
<dd class="m3">￥<span>3567</span></dd>
<dd>
<button class="m4">加入購物車</button>
</dd>
</dl>
<dl pid="1002">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58297f4735d73302.jpg" />
</dt>
<dd class="m1">智能手機(jī)</dd>
<dd class="m2">大屏幕，超高配置</dd>
<dd class="m3">￥<span>2999</span></dd>
<dd>
<button class="m4">添加購物車</button>
</dd>
</dl>
<dl pid="1003">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58298020ad204771.jpg" />
</dt>
<dd class="m1">平板電腦</dd>
<dd class="m2">新上市，值得擁有</dd>
<dd class="m3">￥<span>1899</span></dd>
<dd>
<button class="m4">添加購物車</button>
</dd>
</dl>
<dl pid="1004">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/582980398200b667.jpg" />
</dt>
<dd class="m1">超極本</dd>
<dd class="m2">夠輕薄，夠流暢</dd>
<dd class="m3">￥<span>4999</span></dd>
<dd>
<button class="m4">添加購物車</button>
</dd>
</dl>
</div>
</div>
<!--
描述：數(shù)據(jù)訪問層，操作本地?cái)?shù)據(jù)的模塊
-->
<script type="text/javascript" src="server.js"></script>
<!--
描述：本頁面的js操作
-->
<script type="text/javascript" src="index.js"></script>
</body>
</html>完整的購物車cart.php功能實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>購物車</title>
<!--購物車樣式表-->
<style>
h2{
text-align: center;
}
table{
margin: auto;
width: 90%;
border-color: inherit;
}
th{
color: white;
font-weight: bold;
font-family: 微軟雅黑,宋體;
}
img{
height: 60%;
display: block;
margin: auto;
}
input{
text-align: center;
font-weight: bold;
}
button{
font-weight: bold;
font-size: 13px;
}
</style>
<!--操作cookie的js文件-->
<script type="text/javascript" src="cookie.js"></script>
</head>
<body>
<div class="container">
<h2>購物車</h2>
<h3><a href="list.php">返回商品列表頁面</a></h3>
<table id="table" border="1" cellspacing="0" cellpadding="0" class="hide">
<thead>
<tr style="background-color: #87adbf;">
<th>
<input type="checkbox" id="allCheck" class="ck" />全選
</th>
<th>圖片</th>
<th>描述</th>
<th>數(shù)量</th>
<th>單價(jià)</th>
<th>小計(jì)</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<!--
<tr>
<td><input type="checkbox" class="ck" /></td>
<td>
<img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" />
</td>
<td>純機(jī)械，超酷表帶</td>
<td>
<button class="down">-</button><input type="text" value="1" readonly="readonly" /><button class="up">+</button>
</td>
<td>￥<span>3567</span></td>
<td>￥<span>3567</span></td>
<td><button class="del" >刪除</button></td>
</tr>
-->
</tbody>
</table>
<div class="box" id="box"></div>
<h2 id="h2" class="">總價(jià)格：￥<span id="totalPrice">0</span></h2>
</div>
<script src="server.js" type="text/javascript" charset="utf-8"></script>
<!--操作購物車頁面的cart.js-->
<script src="cart.js"></script>
</body>
</html>這樣通過JavaScript代碼我們就實(shí)現(xiàn)了基本的購物車功能。大家可以通過學(xué)習(xí)進(jìn)行各種嘗試。
本代碼僅供朋友們學(xué)習(xí)交流使用。
