一个简单的购物车功能。
/*购物车*/
var cart = $.cookie("defaultcart");
var thingsMoney = 0;
if(cart == null){
$(".table_list").html("您的购物车暂时还没有商品,<a href='#'>现在采购</a>").css("background","#ccc");
}else{
var goods = cart.split(",");
var obj = goods[0].split(" ")[1];
var things = parseInt($(".thingsMonery").text());
var wareID = goods[0].split(" ")[0];
thingsMoney = obj * things;//
$("#number").val(obj);
$(".thingsMonery").text(thingsMoney);//商品价格的默认值。
/*减法*/
$("#jian").live("click",function(){
var numJian = --obj;//商品数量
var thingsM = numJian*things;//商品价格
$(".thingsMonery").text(thingsM);
if(numJian == 0 || thingsM == 0){
alert("商品数量不能低于0!");
return false;
}else{
$(".thingsMonery").val(things);
$("#number").val(numJian);
$(this).cartcookie({
userID: "default",
wareID: wareID, // wareId string 商品id
number: numJian, // number number 商品数量
type: "u" // type string 操作类型,新增为a,修改为u,删除为d。默认为新增
});
var cart = $.cookie("defaultcart");
}
});
/*加法*/
$("#jia").live("click",function(){
var numJia = ++obj;
var thingsM = numJia*things;
$("#number").val(numJia);//为输入框赋值
$(".thingsMonery").text(thingsM);//商品价格
$(this).cartcookie({
userID: "default",
wareID: wareID, // wareId string 商品id
number: numJia, // number number 商品数量
type: "a" // type string 操作类型,新增为a,修改为u,删除为d。默认为新增
});
var cart = $.cookie("defaultcart");
});
/*清空购物车*/
$("#shopbut").live("click",function(){
$(this).cartcookie({
userID: "default",
wareID: null, // wareId string 商品id
type: "d" // type string 操作类型,新增为a,修改为u,删除为d。默认为新增
});
var cart = $.cookie("defaultcart");
if(cart == null){
$(".table_list").html("清空购物车成功!<a href='javascript:void(0)' id='cagou'>现在采购</a>").css("background","#eee");
}
});
}
这里是把购物车的东西,加入cookie,所以还有一个cookie的js。这个我就不贴了。对于加入cookie的处理,请查看附件。
分享到:
相关推荐
用javascript实现购物车特效
JS实现购物车及计算删除
原生js实现简单购物车功能,方便简单,可直接使用到web
提起购物车想必只有在一些购物网站上才可以看得到,下面为大家介绍下使用js实现的购物车,感兴趣的朋友可以参考下
实现效果: ... javascript实现购物车效果,通过原生js代码实现购物车效果,一般电商网站或者商城网站会使用到购物车的效果,点击加减,总价随之变化,选中商品,点击删除,可以删除选中的商品!
本代码实现了一套完整的购物车功能,批量选择、批量删除。真正告别了霸王购物车,提供完整的注释,简单易懂
资源包含购物车的实现代码、购物车功能介绍、JS部分的详细讲解、视频演示和讲解。 购物车功能介绍:打开购物车的首页有雪花满屏飘落的动态背景和音乐,出现移动文字“欢迎进入购物车”等,点击鼠标后进去购物车界面...
原生JavaScript实现购物车 本文实例为大家分享了JavaScript实现购物车的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>...
js实现购物车加减和价格运算 本文实例为大家分享了js实现购物车加减和价格运算的具体代码,供大家参考,具体内容如下 主要实现功能:购物车的加减,单件商品价格的运算,总价格的运算。价格保留两位小数。 ...
利用原生js和本地存储技术实现购物车功能
JS原生代码实现购物车添加商品、删除商品等操作的结算
javascript实现购物车
js加入购物车抛物线动画与购物车效果特效,亲测可用, 当您在电商购物网站浏览中意的商品时,您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件,点击加入...
原生JS实现购物车结算功能代码
js图书购物车
JS实现购物车结算功能代码
js特效学习-实现购物车特效视频+源码
自己用原生JavaScript写的一个购物车的网页,里面有一些简单的功能,根据数量计算价钱之类的