JavaScript编写一个简易购物车功能


Posted in Javascript onSeptember 17, 2016

网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现。 

1、用html实现内容; 

2、用css修饰外观; 

3、用js(jq)设计动效。

第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): 

<div id="goods">
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/1.png"></li>
    <li class="godprice">¥25.00</li>
    <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的,这部诗集最早由郑振铎先生译介到中国。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/2.png"></li>
    <li class="godprice">¥56.00</li>
    <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/3.png"></li>
    <li class="godprice">¥37.00</li>
    <li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/1.png"></li>
    <li class="godprice">¥25.00</li>
    <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的,这部诗集最早由郑振铎先生译介到中国。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/2.png"></li>
    <li class="godprice">¥56</li>
    <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/3.png"></li>
    <li class="godprice">¥37.00</li>
    <li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
 </div>

 <div id="godcar">
  <div class="dnum">0</div>
  <div class="dcar">
   <img src="images/car.jpg">
  </div>
 </div>

其中涉及到一个知识点:在 <li class="godadd"><a href="javascript:;">加入购物车</a></li>中,我用到了javascript:;这个的意思表示不进行跳转,执行一个空事件。 

第二步:进行外观设计,为了更好的显示,我将包含每个商品列表的div设置了width和height,以及border,值得注意的是,我为了让购物车固定在某个位置,将其position设置为fixed,然后通过设置top和left让其固定在你想要的位置上。另外,要学会灵活使用margin和padding,让显示更美观。 

注:如果想给行内元素设置width和height或者其他块级元素的属性,那么需要设置display:block才可以。 

具体设计代码如下: 

* {
 padding: 0px;
 margin: 0px;
 font-family: "微软雅黑";
}

.goodsItem{
 width:280px;
 height: 400px;
 float: left;
 border: 1px solid #ccc;
 margin:5px;
}
#goods{
 width:910px;
}
.goditem{
 list-style: none;
}
.godpic img{
 display: block;
 width:250px;
 height: 250px;
 margin:0px auto;
}
.godprice,.godinfo,.godadd{
 display: block;
 width:220px;
 margin:0px auto;
 text-align: center;
}
.godprice{
 font-size: 20px;
 color: #f00;
}
.godinfo{
 text-align: center;
 font-size: 14px;
 margin: 10px 0px;

}
.godadd a{
 display: block;
 width: 150px;
 height: 36px;
 background-color: #fd6a01;
 border-radius: 10px;
 margin: 0px auto;
 text-decoration: none;
 color:#fff;
 line-height: 36px;
}
#godcar{
 position: fixed;
 right: 0px;
 top:40%;
 width: 72px;
 height: 64px;
}
#godcar .dnum{
 width:24px;
 height: 24px;
 border-radius: 12px;
 background-color: #f00;
 text-align: center;
 line-height: 24px;
 position: absolute;
 font-size: 12px;
 top:0px;
}
.godadd .bg {
 background-color: #808080;
}

第一个*表示为所有元素设置属性,在一开始就设置margin和padding是一个很好的习惯。

第三步:实现了静态页面,接下来需要通过jq进行购物车具体的实现,比如加入购物车,购物车数量变化等。我花了一些时间在设计:如何让商品加入购物车时,图片能够慢慢移动到购物车,然后变小,最后消失。其中,我用到了animate函数实现这个过程。要实现这个功能的难点在于:图片要怎么移动,怎么变化。 

接下来讲解如何实现这个过程: 

1)首先需要获取到商品的图片,然后将获取到的图片复制一份;

var img = $(this).parent().find(".godpic").find("img");
 var cimg = img.clone();

2)得到商品图片的top和left值,购物车的top和left值,这样才可以通过animate函数实现移动;var imgtop = img.offset().top;

var imgleft = img.offset().left;
var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left;

3)编写animate函数,实现具体的效果;
 cimg.appendTo($("body")).css({

"position": "absolute",//绝对定位
    "opacity": "0.7",
    "top": imgtop,
    "left": imgleft
   }).animate({
    "top": cartop,
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3" //透明度
   }, 1000, function () {
    cimg.remove(); //图片消失
    $(".dnum").text(i); //购物车数量变化
   });

简单的移动和变化就实现了。

但是后面又想,每次刷新购物车的数量重新归0好像不符合事实,于是就想着如何实现刷新页面时,不让购物车的数量发生变化,查了资料,总结了三种方法: 

(1)保存到数据库; 
(2)通过cookie方法; 
(3)通过h5的localStorage方法; 

最后我决定采用第三种方法,因为想试试h5的新方法(出于好奇心理~~,也是因为刚好看到这个方法,就试试看),localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。我的代码具体实现:localStorage.getItem。

好了,所有该讲的都讲完了,附上jq的所有代码,喜欢的就点个赞:

var i = 0;
$(function(){
 var inum = 0;
 if(localStorage.getItem("inum")!==null){
  inum = localStorage.getItem("inum");
 }
 $(".dnum").text(inum);

 $(".godadd").click(function(){
  if (!$(this).find("a").hasClass("bg")) {
   i++;
   $(this).find("a").addClass("bg");
   var img = $(this).parent().find(".godpic").find("img");
   var cimg = img.clone();

   var imgtop = img.offset().top;
   var imgleft = img.offset().left;

   var cartop = $("#godcar").offset().top;
   var carleft = $("#godcar").offset().left;

   cimg.appendTo($("body")).css({
    "position": "absolute",
    "opacity": "0.7",
    "top": imgtop,
    "left": imgleft
   }).animate({
    "top": cartop,
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3"
   }, 1000, function () {
    cimg.remove();
    $(".dnum").text(i);
    localStorage.setItem("inum", i);
   });
  }

 });
});

效果图:

JavaScript编写一个简易购物车功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 #Javascript
Bootstrap响应式侧边栏改进版
Sep 17 #Javascript
H5用户注册表单页 注册模态框!
Sep 17 #Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 #Javascript
JavaScript职责链模式概述
Sep 17 #Javascript
JavaScript类的写法
Sep 17 #Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 #Javascript
You might like
基于文本的搜索
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python3中rank函数的用法
2019/11/27 Python
python requests.get带header
2020/05/05 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
仓库管理制度
2014/01/21 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
2014个人年度工作总结
2014/12/15 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS