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 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
node.js博客项目开发手记
Mar 16 Javascript
vuex与组件联合使用的方法
May 10 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 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+mysql保存和输出文件
2006/10/09 PHP
PHP 学习路线与时间表
2010/02/21 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
JS动画定时器知识总结
2018/03/23 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Python多线程实现同步的四种方式
2017/05/02 Python
python书籍信息爬虫实例
2018/03/19 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
办公室主任先进事迹
2014/01/18 职场文书
模具毕业生推荐信
2014/02/15 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
对标管理实施方案
2014/03/12 职场文书
绿色城市实施方案
2014/03/19 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
应届毕业生求职信
2014/05/26 职场文书
企业领导对照检查材料
2014/08/20 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书