有关于购物车买买买?剁手吧

这世间,美好的东西实在数不过来了,我们总是希望得到的太多,让尽可能多的东西为自己所拥有。人生如白驹过隙一样短暂,生命在拥有和失去之间,不经意地流干了。如果你失去了太阳,你还有星光的照耀,失去了金钱,还会得到友情,当生命也离开你的时候,你却拥有了大地的亲吻。拥有时,倍加珍惜;失去了,就权当是接受生命真知的考验,权当是坎坷人生奋斗诺言的承付。拥有诚实,就舍弃了虚伪;拥有充实,就舍弃了无聊;拥有踏实,就舍弃了浮躁。不论是有意的丢弃,还是意外的失去,只要曾经真实的拥有,在一些时候,大度的舍弃不也是一种境界吗?在不经意所失去的,你还可以重新去争取。丢掉了爱心,你可以在春天里寻觅,丢掉了意志,你要在冬天重新磨砺。但是丢掉了懒惰,你却不能把它拾起。欲望太多,反成了累赘,还有什么比拥有淡泊的心胸,更能让自己充实、满足呢?选择淡泊,然后准备走一段山路。

美丽的短文欣赏完了是不是准备好来听小编的讲解呢,看标题进来的肯定大部分是女生吧,女生都喜欢买买买,淘淘淘之类,今天小编就带大家了解关于我们淘宝的购物车的结构以及实现的部分代码~

下面先展示页面部分:    

女生是不是很熟悉这个页面,阿哈哈,下面小编将详细讲解购物车功能及代码:

功能模块一:全选及单选

步骤一:给全选框触发事件,点击全选触发

步骤二:判断选定的是全选框还是单选框

以下是详细的代码:

 1        //点击复选框全选或全不选效果
 2                 $("#allCheckBox").click(function () {
 3                  var checked = $(this).is(":ckecked");
 4                  $(".cart_td_1").children().attr("checked",checked);
 5              });
 6
 7             //判断是否全选
 8              function AllChecked() {
 9                  var checkedBoxs = $(".cart_td_1").children();
10                  var sum = checkedBoxs.size();
11                  var k = 0;
12                  checkedBoxs.each(function (index, dom) {
13                      if ($(dom).is(":checked")) k++;
14                  });
15                  if (k == sum) {
16                      $("#allCheckedBox").attr("checked", true);
17                  } else {
18                      $("#allCheckedBox").attr("checked", false);
19                  }
20              }

功能模块二:增删改

所谓的增删改就是在有一件的商品的前提下点击+可以添加一件商品,点击-就在在这件商品的基础上删除一件,点击删除就可以将这件的商品的全部信息全部删除

 1         //删除商品
 2              $(".cart_td_8 a").click(function () {
 3                  $(this).parent().parent().prev("tr").remove();
 4                  $(this).parent().parent().remove();
 5              });
 6             //+1时触发的事件
 7              $(".num_input").next().click(function () {
 8                  var num = parseInt($(this).prev().val()) + 1;
 9                  $(this).prev().val(num);
10                  productPrice();
11              });
12             //-1时触发的事件
13              $(".num_input").prev().click(function () {
14                  var num = parseInt($(this).next().val()) - 1;
15                  if (num == 0) {
16                      $(this).next().val(1);
17                  } else {
18                      $(this).next().val(num);
19                  }
20 });

功能模块三:计算总价以及积分

当我们选好需要的商品时,最后会显示金额以及购买后获得的积分

 1  function productPrice() {
 2                  var $tr = $("#shopping").find("tr[id]");
 3                  var summer = 0;
 4                  var integral = 0;
 5                  $tr.each(function (i, dom) {
 6                      var num = $(dom).children(".cart_td_6").find("input").val();//商品数量
 7                      var price = num * $(dom).children(".cart_td_5").text();//商品小计
 8                      $(dom).children(".cart_td_7").html(price);//显示商品小计
 9                      summer += price;//总价
10                      integral += $(dom).children(".cart_td_4").text() * num;//积分
11                  });
12                  $("#total").text(summer);
13                  $("#integral").text(integral);
14              }

模块四:当然为了防止顾客恶搞,一直不停的减少商品的购买量,这时就需要一个方法提示顾客

 1  function changeNumber(dom,flag) {
 2                  var $input = $(dom).parent().find("input");
 3                  var value = $input.val();
 4                  if (flag) {
 5                      value++;
 6                  } else {
 7                      value--;
 8                      if (value <= 0) {
 9                          value = 1;
10                          alert("你还买不买阿?!");
11                      }
12                  }
13                  $input.val(value);
14                  productPrice();
15              }

好了,以上就是购物车的一些基本的功能模块以及实施的代码,小伙伴们是否已经有点感觉了呢,那就快快自己动手试试喽~

 

时间: 2024-10-20 13:12:32

有关于购物车买买买?剁手吧的相关文章

剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记

前言 网购已经不再是现在的时髦,而变成了我们每天的日常生活.上网已经和买买买紧密地联系在了一起,成为了我们的人生信条.而逛街一词,越来越多地变成了一种情怀.有时候我们去逛街,要么是为了打发时间,要么是想亲手摸摸商品本身,要么就是想看看不同的商品,放在眼前或者在脑海里比较一下.毕竟现在网上琳琅满目的商品让人眼花缭乱,一次展示一个,看完这个,忘了上一个:看完了最后一个,已经没有力气再打开长长的历史列表一个一个看回去.如果没有石猴的火眼金睛,如何万里挑一,找到自己中意的那个‘它’呢?毕竟我们大多数人,

“剁手节”来了,红包你抢到了吗?

雷迪森卷头们, 又到了一年一度的剁手节,年年节后喊剁手,然鹅并没有什么卵用!买买买还是会继续! 说到买买买,现在的各位童鞋可能并不担心有没有钱,而是更担心能不能抢到货,以及商家的各路红包有没有一个不落地抢到手.(先不说了,我要等着抢红包了,5.4.3.-..) 高效才能带动起收割的节奏 有别于原先十几个虚机搭建需要两天时间的情况,现在客户仅需要到镜像市场找到该应用,点击部署并完善相关信息之后,短短 20 分钟的时间就能完成整个架构的部署,用户只需上传自己的应用即可.这样一来,大大提高部署效率,有

互联网“剁手”新方向,VR全景购物忙——全景智慧城市常诚

随着VR和AR技术的兴起,各行各业都在寻求VR+的对接方式,除了游戏和社交平台,另一大对VR有着浓厚兴趣的就是电商平台了,阿里.京东等电商巨头纷纷成立VR事业部,如何让亿万用户在VR中愉快的买买买,已经成为电商公司的战略方向.近日,主打跨国电子支付方案公司Worldpay曝光了一个Demo,展示了公司研发的VR付款方案,预示了VR剁手的新方向. vr全景智慧城市项目是河南艺境空间文化传播有限公司自主开发的国内首家商业V R全景平台,以线下实体为依托,利用VR技术把线下实体店还原到线上,让线上购物

手机无感知验证时代来了:避免剁手的最后一道屏障消失了?!

人的懒惰没有极限.就拿手机验证这事儿来说,现在的体验流程已经相当简单,不记得静态密码也没事,只需要通过手机短信验证就可以解决绝大部分注册.登陆.下单问题.但是本机主每次看到短信推送验证码."天空飘来六个数字"的时候,心里就会莫名紧张,生怕不能在短信消失前把六个数字记下来.万一记不下来或者输错还得切换回短信去看,一些APP因此还要重新走一遍流程-- 好在,懒惰鼓励人类进步.现在,一种用户"无感知"的手机验证方式已经开始投入使用了!这就是"号码认证"

CorelDRAW购物节福利开奖 | “剁手节”前的攻略来了,请查收!

距离"剁手节" 还有不到两周的时间 相信一些线上.线下.微商.电商...都拿出了看家本领进行市场混战 一场没有硝烟的战争开始啦!! -- 当然,我也不例外 你们谁都别拦着,我要打广告了 让你变成了不折不扣的 ▼ 不过,话说回来 "只有买买买的人生,才是完整的人生 不然跟一条咸鱼有什么区别?!" "钱没了可以再挣,宝贝下架了可就没了!" 嗯哼,CorelDRAW X6底价清仓啦,一套不留 再过数十天,有钱也买不到 这就有点尴尬了 ▼ 而且小编自认为

商户们的赚钱利器,消费者的剁手助手:支付宝钱包

摘要:马云打造了阿里,创造了淘宝,制造了"光棍节",这些都还不够满足他的野心,为了能够更方便快捷得让消费者们心甘情愿从自己口袋中掏出钢镚儿,他又"处心积虑"得推出了支付宝钱包. 以前出门逛街总会听到这样的提醒:别忘了带钱包!如今不带钱包也照样可以逛街,一部手机便可以解决.还别小看支付宝钱包,它不仅可以帮你转账付款.还信用卡.缴生活费用等,还可以帮你管理闲散资金,几乎满足了生活中大部分支付操作,甚至在有些商场都可以用,说它是通往剁手之路上的最佳助手,一点也不为过. 但

电商运营的剁手套路

双11剁的手还没长出来,双12又到了.到底这些没完没了的电商活动,是为了啥?电商运营的剁手套路 一切,都要从运营的重要性开始聊-- 一.重运营,是互联网发展的必然 互联网从起源到现在,经历了怎样的趋势变化? 若仅看国内的互联网发展历史,从产品发展策略的角度,我们可以发现一些关键的节点存在. 电商运营:剁手不停的"罪魁祸首" 第一个阶段,诞生初期的混沌:1995~2005 互联网刚诞生的时候,互联网产品基本上以 web 端的门户网站,搜索引擎,论坛聊天室等形态存在. 大家对做怎样的互联网

剁手季我做过最牛的事情

双十一是一个"悲喜交加"日子, 你满满的荷包可能已经在这一天"挥霍"一空, 你身边的朋友成双成对,然而你还是孤单一人, 你根本没有办法体验购物的乐趣,只因上亿人购买的快感来自于你的代码"保障" 现在,你将不再孤单 说出#剁手季 我做过最牛的事情 100万京豆(价值10000元) 一人独享! [活动奖励] 一等奖: 京豆奖励100万个 1名 (价值10000元RMB) 二等奖: 京豆奖励7000个 20名(价值70元RMB) 三等奖: 京豆奖励30

双十一剁手了吗

大家都买了多少? 想抢个天猫的智能音响,结果手慢了点. 给媳妇抢了点化妆品,跟家里抢了点生活用品,自己买了双鞋.. 不知不觉在建行这边工作三个多月了,如期转正,自我感觉有点懈怠,在程序员的成长轨迹中是要不得的,时刻提醒自己,要小心被淘汰,逆水行舟,不进则退,打算将组长布置的任务提前完成了好给自己充电,不能太被动. 老平台中开发用的stuts2,jpa,jqgrid,jbpm等技术,花了点时间回头去研究前辈们写的代码,并自己开发了好些页面的前后台,基本算熟悉了,不过现在这些技术用的很少了. 新平台