登录  /  注册
首页 > web前端 > js教程 > 正文

JS实现简单购物车功能代码分析

php中世界最好的语言
发布: 2018-05-23 11:22:58
原创
5147人浏览过

这次给大家带来JS实现简单购物车功能代码分析,JS实现简单购物车功能的注意事项有哪些,下面就是实战案例,一起来看一下。

我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算。购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化。

现在,笔者对购物车进行了简单实现,能够实现真实购物车当中的大部分功能。在本示例当中,用到了javascript中BOM操作,DOM操作,表格操作,cookie,json等知识点,同时,采用三层架构方式对购物车进行设计,对javascript的综合应用较强,对javascript初学者进阶有一定的益处。

请看主页效果图:

现在读者已经对主页的效果图进行了了解,我在这里附上主页的html代码,供读者参考,建议读者根据自己的思路写代码。

请看html代码:

nbsp;html>

 
 <meta>
 <title>商品列表页面</title>
 <!--商品列表样式表-->
 <link>
 <!--cookie操作的js库-->
 <script></script>
 
 
 <p>
  </p><h1>商品列表</h1>
  <p>
  <a>我的购物车</a><i>0</i>
  </p>
  <p>
  </p>
登录后复制
   
   JS实现简单购物车功能代码分析    
   
智能手表
   
酷黑,棒,棒,棒,棒
   
998
   
       
  
  
   
   JS实现简单购物车功能代码分析    
   
智能手机001
   
金红色,酷酷酷酷
   
1998
   
       
  
  
   
   JS实现简单购物车功能代码分析    
   
华为手机002
   
帅帅帅帅帅帅帅帅帅帅
   
998
   
       
  
  
   
   JS实现简单购物车功能代码分析    
   
华为手机003
   
杠杠的
   
2000
   
       
  
        <script></script>    <script></script>  

html结构代码有了之后,就可以对主页进行css表现设计,这里不对css进行过多讲解。

我们对主页进行设计之后,就可以进行与主页相关的DOM操作,涉及到添加按钮的点击事件,cookie和json的应用,cookie主要为了让当前数据与购物车进行共享,以方便操作。请看与之相关的javascript代码:

这是index.js代码,主要是主页的相关操作:

/*
 思路:
 第一步:获取所要操作的节点对象
 第二步:当页面加载完后,需要计算本地cookie存了多少【个】商品,把个数赋值给ccount
 第三步:为每一个商品对应的添加购物车按钮绑定一个点击事件onclick
  更改本地的cookie
  获取当前商品的pid
  循环遍历本地的cookie转换后的数组,取出每一个对象的pid进行对比,若相等则该商品不是第一次添加
  从购物车中取出该商品,然后更pCount值追加1
  否则:创建一个新的对象,保存到购物中。同时该商品的数量为1
 */
var ccount = document.getElementById("ccount"); //显示商品总数量的标签节点对象
var btns = document.querySelectorAll(".list dl dd button"); //所有的购物车按钮
//约定好用名称为datas的cookie来存放购物车里的数据信息 datas里所存放的就是一个json字符串
var listStr = cookieObj.get("datas");
/*判断一下本地是否有一个购物车(datas),没有的话,创建一个空的购物车,有的话就直接拿来使用*/
if(!listStr) { //没有购物车 datas json
 cookieObj.set({
 name: "datas",
 value: "[]"
 });
 listStr = cookieObj.get("datas");
}
var listObj = JSON.parse(listStr); //数组
/*循环遍历数组,获取每一个对象中的pCount值相加总和*/
var totalCount = 0; //默认为0
for(var i = 0, len = listObj.length; i <p style="text-align: left;">这是cookie.js的代码,主要涉及cookie的设置获取操作,采用单例<a href="http://www.php.cn/course/58.html" target="_blank">设计模式</a>进行了封装设计,请看代码:</p><pre class="brush:php;toolbar:false">/*
 单例设计模式
 完整形式:[]中是可选项
 document.cookie = “name=value[;expires=date][;path=path-to-resource][;domain=域名][;secure]”
*/
var cookieObj = {
 /*
 增加或修改cookie
 参数:o 对象{}
 name:string cookie名
 value:string cookie值
 expires:Date对象 过期时间
 path:string 路径限制
 domain:string 域名限制
 secure:boolean true https false或undeinfed 
 */
 set: function(o) {
 var cookieStr = encodeURIComponent(o.name) + "=" + encodeURIComponent(o.value);
 if(o.expires) {
  cookieStr += ";expires=" + o.expires;
 }
 if(o.path) {
  cookieStr += ";path=" + o.path;
 }
 if(o.domain) {
  cookieStr += ";domain=" + o.domain;
 }
 if(o.secure) {
  cookieStr += ";secure";
 }
 document.cookie = cookieStr;
 },
 /*
 删除
 参数:n string cookie的名字
 */
 del: function(n) {
 var date = new Date();
 date.setHours(-1);
 //this代表的是当前函数的对象
 this.set({
  name: n,
  expires: date
 });
 },
 /*查找*/
 get: function(n) {
 n = encodeURIComponent(n);
 var cooikeTotal = document.cookie;
 var cookies = cooikeTotal.split("; ");
 for(var i = 0, len = cookies.length; i <p style="text-align: left;">下面的是server.js代码,主要对购物车中各种操作进行了封装,比如商品个数统计,更新获取本地数据等操作,方便代码管理,请看代码:</p><pre class="brush:php;toolbar:false">/*
 功能:查看本地数据中是否含有指定的对象(商品),根据id
 参数:id:商品的标识
 */
function checkObjByPid(id) {
 var jsonStr = cookieObj.get("datas");
 var jsonObj = JSON.parse(jsonStr);
 var isExist = false;
 for(var i = 0, len = jsonObj.length; i <p style="text-align: left;">因为上述代码中涉及了进入购物车后的一些操作,读者看了之后可能会感动疑惑,不用担心,下面请看点击进入我的购物车之后的分析。</p><p style="text-align: left;">请看效果图: </p><p style="text-align: left;"><img id="theimg" alt="" src="https://img.php.cn/upload/article/000/061/021/27b6d78decef73eb0cda116091b763b7-1.png"></p><p   style="max-width:90%">笔者在主页中点击了三种商品,共点击了七次,在购物车中出现了相应商品以及价格计算。对于途中的各种信息,相信读者一目了然。请看本购物车的html代码:</p><pre class="brush:php;toolbar:false">nbsp;html&gt;

 
 <meta>
 <title>购物车</title>
 <!--购物车样式表-->
 <link>
 <!--操作cookie的js文件-->
 <script></script>
 
 
 <p>
  </p><h1>购物车</h1>
  <h3><a>返回商品列表页面</a></h3>
  
登录后复制
                                                      
    全选         图片         描述         数量         单价         小计         操作    
  

购物车里没有任何商品

  

总价格:¥0

   <script></script>    <script></script>  

在对购物车进行相关的表现设计之后,既要进行javascript行为设计,请看与本页相关的cart.js代码:

/*
 思路:
 第一步:当页面加载完后,根据本地的数据,动态生成表格(购物车列表)
  获取所要操作的节点对象
  判断购物车中是否有数据?
  有:
   显示出购物列表
  没有:
   提示购物车为空
 第二步:当购物车列表动态生成后,获取tbody里所有 的checkeBox标签节点对象,看那个被选中就获取对应行小计进行总价格运算。
 第三步:
  为每一个checkbox添加一个onchange事件,根据操作更改总价格
 第四步:全选
 第五步:
  为加减按钮添加一个鼠标点击事件
  更改该商品的数量
 第六步:删除
  获取所有的删除按钮
  为删除按钮添加一个鼠标点击事件
  删除当前行,并更新本地数据
 */
var listObj = getAllData();
var table = document.getElementById("table")
var box = document.getElementById("box")
var tbody = document.getElementById("tbody");
var totalPrice = document.getElementById("totalPrice");
var allCheck = document.getElementById("allCheck");
if(listObj.length == 0) { //购物车为空
 box.className = "box";
 table.className = "hide";
} else {
 box.className = "box hide";
 table.className = "";
 for(var i = 0, len = listObj.length; i ' +
  '<input>' +
  '' +
  '<td>' +
  '<img  alt="JS实现简单购物车功能代码分析" >' +
  '</td>' +
  '<td>' +
  listObj[i].pDesc +
  '</td>' +
  '<td>' +
  '<button>-</button><input><button>+</button>' +
  '</td>' +
  '<td>' +
  '¥<span>' + listObj[i].price + '</span>' +
  '</td>' +
  '<td>' +
  '¥<span>' + listObj[i].price * listObj[i].pCount + '</span>' +
  '</td>' +
  '<td>' +
  '<button>删除</button>' +
  '</td>';
 tbody.appendChild(tr);
 }
}
/*
 功能:计算总价格
 */
var cks = document.querySelectorAll("tbody .ck");
function getTotalPrice() {
 cks = document.querySelectorAll("tbody .ck");
 var sum = 0;
 for(var i = 0, len = cks.length; i <p style="text-align: left;">上述代码完成了购物车中的相关操作,比如价格计算,商品数量更换,<a href="http://www.php.cn/code/6807.html" target="_blank">商品删除</a>等操作。</p><p style="text-align: left;">到这里我们已经完成了购物车的大部分功能,我们对html,css, BOM,DOM,json,cookie等进行了综合应用,相信读者理解之后一定会对自己的javascript学习更进一步,本示例中涉及的大部分代码都在本页中贴出,部分代码资源未向读者展示,读者可以点击下面的资源链接,下载本示例的全部代码及图片资料。本示例采用HBuilder编译器编译运行,涉及cookie操作,请读者自行安装服务器或者添加到HBuilder中运行查看。</p><p>相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!</p><p>推荐阅读:</p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-397760.html" target="_blank">使用vue.js实现编辑菜谱</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-397752.html" target="_blank">mpvue小程序markdown适配怎样实现</a><br></p>
登录后复制

以上就是JS实现简单购物车功能代码分析的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号