jQuery实现移动端手机商城购物车功能,基于JQue

时间:2019-06-19 23:07来源:亚洲城ca88唯一官方网站
前段时间了解到购物车结算算是一个难点部分,在网上也找了一些,但是网上除了插件之外,就是一些半成品,比如一部分只有添加删除效果,另一部分只有结算功能,很少见到整合在

前段时间了解到购物车结算算是一个难点部分,在网上也找了一些,但是网上除了插件之外,就是一些半成品,比如一部分只有添加删除效果,另一部分只有结算功能,很少见到整合在一起的购物车效果,因此自己写了一个,方便大家查看
(添加效果没有飞入,实在懒得写动画效果了,凑合看吧)

本文实例讲述了jQuery基于cookie实现的购物车。分享给大家供大家参考,具体如下:

购物车数量加减

HTML部分

这里分析了jquery购物车原理,包括添加商品及数量到购物车 cookie 中,判断购物车中有无商品,如果有,则把json字符串转换成对象,返回当前商品在 cookie 中的总数。

右加号

<!DOCTYPE html> 
<html> 
<head> 
   <meta charset="utf-8"> 
   <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
   <title></title> 
   <link rel="stylesheet" href="css/index.css" rel="external nofollow" > 
   <script src="http://www.bafengyi.com/uploads/allimg/190619/230F460L-0.jpg" type="text/javascript" charset="utf-8"></script> 
   <script src="js/index.js" type="text/javascript" charset="utf-8" async defer></script> 
</head> 
<body> 
   <div id="banner"></div> 
   <div id="container"> 
    <ul> 
      <li num="1"><img src="images/1.jpg"/>2014年春季爆品A<p>$<i>10</i>点击购买</p></li> 
      <li num="2"><img src="images/2.jpg"/>2014年春季爆品B<p>$<i>20</i>点击购买</p></li> 
      <li num="3"><img src="images/3.jpg"/>2014年春季爆品C<p>$<i>30</i>点击购买</p></li> 
      <li num="4"><img src="images/4.jpg"/>2014年春季爆品D<p>$<i>40</i>点击购买</p></li> 
    </ul> 
   </div> 

   <div id="carlist"> 
    <div class="car"> 
      <div> 
        <img src="images/car.png"/> 
        购<br />物<br />车 
      </div> 

    </div> 
    <div class="list"> 
      <!--此处添加动态元素--> 
      <div class="total"> 
        总价:0元 
      </div> 
    </div> 
   </div> 
   <script type="text/javascript"> 
    function view(){ 
          return{ 
            w:document.documentElement.clientWidth, 
            h:document.documentElement.clientHeight 
          }; 
        } 
        document.body.style.height=view().h "px"; 
   </script> 
</body> 
</html> 

将商品放入购物车:

$(".jiahao").click(function() {
var t = $(this).siblings().find("input");//取到数量
t.val(parseInt(t.val())   1);//parseInt()解析input一个字符串,返回一个整数
heji();//调用后面计算的函数
})

JS部分 

$(function(){
$(".tc").hide();
var PId = $("#hfPId").val(); // 商品的ID
var PName = $("#lblPName").text(); // 商品名称
var PMemberPrice = $("#lblPMemberPrice").text(); // 会员价
var PAmount = 1;
var jsonStr = "[{'PId':'"   PId   "','PName':'"   PName   "','PMemberPrice':'"   PMemberPrice   "','PAmount':'"   PAmount   "'}]";
//将商品放入购物车
$("#putCart").click(function(){
setCookie(PId, jsonStr);
});

左减号

$(function(){ 
 var mark=0; 
 $(".car").on("click",function(){ 
   if(mark==0){ 
     $("#carlist").animate({marginRight:"0px"},500) 
     mark=1; 
   }else{ 
     $("#carlist").animate({marginRight:"-260px"},500) 
     mark=0 
   } 
 }) 


 //点击购买按钮添加至购物车 
 var buyButton=$(".buy"); 
 buyButton.on("click",BuyClick) 

 function BuyClick(){ 
   var thingsName=$(this).parents("li").find(".things_name").text(); 
   var thingsPrice=$(this).parent().find("i").text(); 
   var thingsImage=$(this).parents("li").find("img").attr("src"); 
   var kNum=$(this).parents("li").attr("num") 
   var Geshu=1; 
   $(this).off("click").text("已经添加至购物车"); 

   $(".list").append('<div class="select things" num=' kNum '><img src=' thingsImage '/><p class="name">' thingsName '</p><p class="price">$<i>' thingsPrice '</i></p><ul class="caozuo"><li class="zengjian">-1 </li><li class="del">删除</li></ul></div>'); 
   countTotalPrice(); 
   totalGeshu(); 

   //点击加号添加商品个数 

   $(".add").off("click").on("click",function(){ 
     Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text()) 
     Geshu   
     $(this).parent().find("span:nth-of-type(2)").text(Geshu) 
     countTotalPrice(); 
     totalGeshu(); 
   }) 

   //动态生成的元素点击减号减少商品个数 
   $(".minus").off("click").on("click",function(){ 
     Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text()); 
     if(Geshu>1){ 
       Geshu--; 
       $(this).parent().find("span:nth-of-type(2)").text(Geshu) 
     }else{ 
       Geshu==1; 
     } 
     countTotalPrice(); 
     totalGeshu(); 
   }) 

   //删除购物车内的商品 
   var del=$(".del"); 
   del.each(function(){ 
     $(this).off("click").on("click",function(){ 
       var delName=$(this).parents(".things").find(".name").text(); 
       $(this).parents(".things").remove(); 
       countTotalPrice(); 
       totalGeshu(); 
       var oldBtn=$("#container ul li").find("span:contains(" delName ")").parents("li").find(".buy") 
       oldBtn.on("click",BuyClick).text("点击购买") 
     }) 
   }) 

   //计算总价函数 
   function countTotalPrice(){       
     var totalPrice=0,listThings=$(".list").find(".things"); 
     for (var i=0;i<listThings.length;i  ) { 
       var this_geshu=parseInt(listThings.eq(i).find(".zengjian span:nth-of-type(2)").text()); 
       var this_price=parseInt(listThings.eq(i).find(".price i").text()); 
       totalPrice =this_geshu*this_price; 
     } 
     $(".total span").eq(1).text(totalPrice); 
     totalGeshu(); 
   } 

   //购物车上的商品总数 
   function totalGeshu(){ 
     var listThings=$(".list").find(".things"); 
     if (listThings.length>0) { 
       var totalGeshu=0; 
       listThings.each(function(){ 
         var this_geshu=parseInt($(this).find(".zengjian span:nth-of-type(2)").text()); 
         totalGeshu =this_geshu; 
       }) 
       $(".carLogo span").html(totalGeshu) 
     } else{ 
       $(".carLogo span").css("display","none") 
     } 
   } 
 } 
}) 

赋值:

$(".jianhao").click(function() {
var t = $(this).siblings().find("input");
t.val(parseInt(t.val()) - 1);
//当数量小于1的时候让最小值等于1
if(parseInt(t.val()) < 1) {
t.val(1)
};
heji();
})

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

var setCookie = function(name, value, options){
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime()   (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires='   date.toUTCString();
}
var path = options.path ? '; path='   (options.path) : '';
var domain = options.domain ? '; domain='   (options.domain) : '';
var secure = options.secure ? '; secure' : '';

计算商品总价

亚洲城ca88唯一官方网站,您可能感兴趣的文章:

  • jQuery实现购物车多物品数量的加减 总价计算
  • 基于JQuery实现的类似购物商城的购物车
  • 纯jquery实现模仿淘宝购物车结算
  • jQuery实现购物车数字加减效果
  • jQuery实现购物车计算价格功能的方法
  • jQuery实现类似淘宝购物车全选状态示例
  • 基于jquery fly插件实现加入购物车抛物线动画效果
  • jQuery基于cookie实现的购物车实例分析
  • jQuery基于json与cookie实现购物车的方法
  • jQuery使用cookie与json简单实现购物车功能

希望本文所述对大家jQuery程序设计有所帮助。

function heji() {
$(".gwcar").each(function() {//循环整个购物车
var oprice = ; //商品总价
$(this).find(".glist").each(function() {//循环购物车里的每个商品,this值得是这个购物车
if($(this).find(".btn").hasClass("option") == true) {//判断商品被选中的情况下,this指的是购物车的三个商品
var num = $(this).find(".shuliang").val();//取到数量,this指的还是购物车的商品一个
var danjia = $(this).find(".danjia").text();
var xiaoji = num * danjia; //商品小计
oprice  = xiaoji;
$(".zongjia").html(oprice);
};
});
});
};

您可能感兴趣的文章:

  • jQuery实现购物车多物品数量的加减 总价计算
  • 基于JQuery实现的类似购物商城的购物车
  • 纯jquery实现模仿淘宝购物车结算
  • jQuery实现购物车数字加减效果
  • jQuery实现购物车计算价格功能的方法
  • jQuery实现类似淘宝购物车全选状态示例
  • 基于jquery fly插件实现加入购物车抛物线动画效果
  • jQuery基于json与cookie实现购物车的方法
  • jQuery使用cookie与json简单实现购物车功能
  • 基于JQuery的购物车添加删除以及结算功能示例

最后附图一张

亚洲城ca88唯一官方网站 1

以上所述是小编给大家介绍的jQuery实现移动端手机商城购物车功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • jquery实现手机端单店铺购物车结算删除功能
  • jquery购物车结算功能实现方法
  • 购物车前端开发(jQuery和bootstrap3)
  • jQuery使用cookie与json简单实现购物车功能
  • jQuery基于json与cookie实现购物车的方法
  • 使用Python的Django框架结合jQuery实现AJAX购物车页面
  • jQuery实现购物车多物品数量的加减 总价计算
  • jQuery实现加入购物车飞入动画效果
  • 基于JQuery实现的类似购物商城的购物车
  • jQuery模拟淘宝购物车功能

编辑:亚洲城ca88唯一官方网站 本文来源:jQuery实现移动端手机商城购物车功能,基于JQue

关键词: 亚洲城ca88