JavaScript開發購物車之購物車功能完整程式碼
本節展示JavaScript開發購物車之購物車功能完整程式碼。
透過引用我們創建好的4個JS文件，在頁面中完整的實現購物車的各項功能。
我們建立了list.php檔案用來進行商品展示，cookie.js檔案操作cookie，
index.js檔案操作清單頁，server .js操作本地資料模組。
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">纯机械，超酷表带</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">智能手机</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>
<!--
描述：数据访问层，操作本地数据的模块
-->
<script type="text/javascript" src="server.js"></script>
<!--
描述：本页面的js操作
-->
<script type="text/javascript" src="index.js"></script>
</body>
</html>完整的購物車cart.php功能實作程式碼：
<!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>数量</th>
<th>单价</th>
<th>小计</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>纯机械，超酷表带</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="">总价格：￥<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程式碼我們就實現了基本的購物車功能。大家可以透過學習進行各種嘗試。
本程式碼僅供朋友學習交流使用。
#
