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 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
javascript if条件判断方法小结
May 17 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
Javascript confirm多种使用方法解析
Sep 25 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
php Xdebug的安装与使用详解
2013/06/20 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
php创建类并调用的实例方法
2019/09/25 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python访问sqlserver示例
2014/02/10 Python
python threading模块操作多线程介绍
2015/04/08 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
大学生应聘推荐信范文
2013/11/19 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
社区交通安全实施方案
2014/03/22 职场文书
新教师个人总结
2015/02/06 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
军训决心书范文
2015/09/22 职场文书