Code complet de la fonction de panier pour développer un panier avec JavaScript
Cette section présente le code complet de la fonction de panier développée par JavaScript.
En référençant les 4 fichiers JS que nous avons créés, toutes les fonctions du panier sont entièrement implémentées sur la page.
Nous avons créé le fichier list.php pour l'affichage des produits, le fichier cookie.js gère les cookies,
le fichier index.js gère la page de liste, le serveur .js exploite un module de données local.
Le fichier cart.php affiche la page du panier et le fichier cart.js gère le panier.
Page de liste complète des produits list.php code :
<!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>Panier complet cart.php code d'implémentation de la fonction :
<!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>De cette façon, nous pouvons implémenter la fonction de base du panier via du code JavaScript. Tout le monde peut faire diverses tentatives grâce à l'apprentissage.
Ce code est uniquement destiné à l'apprentissage et à la communication entre amis.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
