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代码我们就实现了基本的购物车功能。大家可以通过学习进行各种尝试。
本代码仅供朋友们学习交流使用。