sjeveryday
- 浏览: 223185 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
wsj0051：
很好，一致纠结图片路径问题
Spring 发送普通邮件、夹带附件的邮件、嵌入网页或图片的邮件 使用方法 -
ejinxian：
值得学习，
ExtJS+FusionCharts(转) -
niewj：
不知道都是哪里来的。
111
Jquery 购物车
- 博客分类：
- JS，Jquery
参考文档：
http://www.cnblogs.com/blackice/archive/2013/04/21/3034043.html
http://www.nowamagic.net/jquery/jquery_JqueryCookie.php
http://www.cnblogs.com/blackice/archive/2013/04/21/3034043.html
http://www.nowamagic.net/jquery/jquery_JqueryCookie.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TV365—精伦云影音智能机官方直销网站</title>
<meta name="keywords" content="云影音智能机，精伦H1，精伦H3，精伦H4，智能电视电脑，家庭多媒体中心，海量资讯，精彩视频，高清播放机，高清播放器，电子相册，高清多媒体播放器，高清硬盘播放机，智能电视，电视上网，高清视频，高清硬盘播放器，高清电视，互联网电视，网络高清播放器">
<meta name="description" content="提供最新最热最经典的高清影视剧、新闻娱乐、文化体育、财经教育、生活服务等在线视频，还有音乐、图片新闻、体感游戏、网页浏览等，与电视无缝对接，实现电视的无限应用。">
<link href="/css/style.css" rel="stylesheet"/>
<link href="/css/shop.css" rel="stylesheet"/>
<SCRIPT src="/script/jquery-1.7.1.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="/script/jquery.cookie.js" type="text/javascript"></SCRIPT>
<SCRIPT src="/script/json2.js" type="text/javascript"></SCRIPT>
</head>
<body>
<div class="top_line">
<div class="top_header">
<p class="top_logo"><img src="/images/shell/logo.jpg" ></p>
<ul class="top_menu">
<li id="gn_n1" ><a href="/" hidefocus></a></li>
<li id="gn_n2" ><a href="/product/index.html" hidefocus></a></li>
<li id="gn_n3"><a href="/experience/index.html" hidefocus></a></li>
<li id="gn_n4" class="select4"><a href="/shop/index.html" hidefocus></a></li>
<li id="gn_n5"><a href="/service/index.html" hidefocus></a></li>
</ul>
</div>
</div>
<div style="width:1024px;">
<div class="shop_warp">
<script type="text/javascript">
(function(a){
a.fn.hoverClass=function(b){
var a=this;
a.each(function(c){
a.eq(c).hover(function(){
$(this).addClass(b)
},function(){
$(this).removeClass(b)
})
});
return a
};
})(jQuery);
$(function(){
$("#navbox").hoverClass("current");
//初始化界面加载，获取cookie中的数据
var incart = readProcucts();
cart2Html(incart);
});
//构造购物车对象
var cart = function(){
this.cartCount = 0;
this.cartTotal = 0;
this.cartItems = new Array();
}
//构造购物车商品对象
var CartItems = function(){
this.productSign = "";
//this.productName = "";
//this.productInfo = "";
this.count = 0;
this.price = 0;
}
//向购物车内添加商品
function addProducts2Cart(idName){
//1.先取得当前添加到购物车的数据
var proTemp = $("#"+idName);
var productName = proTemp.children(".cp_tit").html();
var productInfo = proTemp.children(".cp_info").html();
var price = proTemp.children(".cp_price").html();
//2.获得cookie中是否存在同类产品，如果存在，直接在原有的基础上添加数据，没有，则新增一行
var incart = readProcucts();
var indexTemp = findBySign(idName);
//如果没有，则新建一条数据
if(indexTemp <= -1){
var citems = new CartItems();
citems.productSign = idName;
citems.price = price;
citems.count = 1;
incart.cartItems.push(citems);
incart.cartCount++;
}else{
var itemsCount = incart.cartItems[indexTemp].count;
if(itemsCount>=10){
alert("一种商品在购物车中最多下10台！");
return;
}
//如果有，直接在原有的基础上+1即可；
incart.cartItems[indexTemp].count = incart.cartItems[indexTemp].count+1;
incart.cartCount = incart.cartCount +1;
}
var objString = JSON.stringify(incart);
$.cookie("tv365Cookie", objString,{ expires: 7 });
//3.遍历cookie显示在购物车中
cart2Html(incart);
//在显示出弹出界面
show('tc_div_4');
$('#cartNum').html(incart.cartCount);
}
function cart2Html(incart){
var productSignk;
var calcTotalPrice = 0;
var htmlStr = "";
var tempPrice = 0;
if(incart.cartItems.length == 0){
$("#navbox").children(".number").html(0);
$(".subnav").html("<p class='air'><a href='#'><img src='images/shop/icon_1.jpg' align='absmiddle' />您的购物车是空的，赶紧选购吧！</a></p>");
}else{
for (var i = 0; i < incart.cartItems.length; i++) {
var incartItems = incart.cartItems[i];
productSignk = incartItems.productSign;
var proTemp = $("#"+productSignk);
var productName = proTemp.children(".cp_tit").html();
var productInfo = proTemp.children(".cp_info").html();
tempPrice = incartItems.price.replace("￥","");
// alert(productSignk);
htmlStr += "<div class='shop_list'><p class='shop_img'><img src='/images/shop/c_1.jpg' /></p>"+
"<dl><dt><a href='#'>"+productName+"</a> <p><span>"+incartItems.price+"</span>*"+incartItems.count+"</p></dt>"+
"<dd><p>"+productInfo+"</p>"+
//"<a href='#' onclick='removeProducts(\"abcd\")'>删除</a></dd></dl></div>";
"<a href='#' onclick='removeProducts(\""+productSignk+"\")'>删除</a></dd></dl></div>";
calcTotalPrice+=tempPrice*incartItems.count;
}
//4.显示合计数据
var totalStr = "<div class='total'>共<span>"+incart.cartCount+"</span>件商品 共计：<span class='price'>￥"+calcTotalPrice+"</span>"+
"<a href='/shop/order.html'><img src='/images/shop/sub.jpg' /></a></div>";
$(".subnav").html(htmlStr+totalStr);
$("#navbox").children(".number").html(incart.cartCount);
}
}
//根据编码查找位置
function findBySign(productSign){
var incart = readProcucts();
var index = -1;
for (var i = 0; i < incart.cartItems.length; i++) {
if (incart.cartItems[i].productSign == productSign) {
index = i;
}
}
return index;
}
//删除购物车内商品
function removeProducts(productSign){
var incart = readProcucts();
for (var i = 0; i < incart.cartItems.length; i++) {
if (incart.cartItems[i].productSign == productSign) {
//移除商品，重新保存Cookie
incart.cartCount = incart.cartCount - incart.cartItems[i].count;
incart.cartItems.splice(i, 1);
var objString = JSON.stringify(incart);
$.cookie("tv365Cookie", objString,{ expires: 7 });
}
}
//重新加载购物车数据！
cart2Html(incart);
}
//读取购物车的商品
function readProcucts(){
var cart1 = new cart();
//获得cookie
var mycookie = $.cookie("tv365Cookie");
var tv365Cookie = JSON.parse(mycookie);
if(tv365Cookie == null || tv365Cookie == ""){
return cart1;
}else{
}
return tv365Cookie;
}
//清除cookie
function removeCookie(){
$.cookie('tv365Cookie', null); // 删除 cookie
}
</script>
<div id="navbox" class="menu">
<a class="tit" href="#">购物车</a>
<a class="number">0</a>
<div class="subnav">
<p class="air"><a href="#"><img src="images/shop/icon_1.jpg" align="absmiddle" />您的购物车是空的，赶紧选购吧！</a></p>
</div>
</div>
<a href="javascript:void(0);" onclick="removeCookie()"><img src="/images/shop/icon.jpg" align="absmiddle" /> 清除COOKIE</a>
<div class="cp_list">
<dl>
<dt><img src="/images/shop/title_04.jpg" /></dt>
<dd id = 'bzg1_jl_st'>
<p class="cp_tit">别致 G1 <span>香槟金</span> </p>
<p class="cp_info">标配：G1产品、红外遥控器 HDMI高清线 、电源线。 </p>
<p class="cp_price">￥749</p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="addProducts2Cart('bzg1_jl_st')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg" align="absmiddle" style="margin-left:10px;"/></a>
</p>
<p class="cp_bg"><img src="/images/shop/cp_07.jpg" /></p>
</dd>
<dd id = 'bzg1a_jl_st'>
<p class="cp_tit">别致 G1A <span>香槟金</span> </p>
<p class="cp_info">标配：G1A产品、魔幻遥控器 HDMI高清线 、电源线、充电线。 </p>
<p class="cp_price">￥1299</p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="addProducts2Cart('bzg1a_jl_st')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg" align="absmiddle" style="margin-left:10px;"/></a>
</p>
<p class="cp_bg"><img src="/images/shop/cp_08.jpg" /></p>
</dd>
</dl>
<dl>
<dt><img src="/images/shop/title_02.jpg" /></dt>
<dd>
<p class="cp_tit">别致 S1 <span>流光银</span> </p>
<p class="cp_info">标配：S1产品、红外遥控器 HDMI高清线 、电源线。 </p>
<p class="cp_price">￥499</p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg" align="absmiddle" style="margin-left:10px;"/></a>
</p>
<p class="cp_bg"><img src="/images/shop/cp_03.jpg" /></p>
</dd>
<dd>
<p class="cp_tit">别致 S1A <span>流光银</span> </p>
<p class="cp_info">标配：S1A产品、魔幻遥控器 HDMI高清线 、电源线、充电线。 </p>
<p class="cp_price">￥699</p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg" align="absmiddle" style="margin-left:10px;"/></a>
</p>
<p class="cp_bg"><img src="/images/shop/cp_04.jpg" /></p>
</dd>
</dl>
<dl>
<dt><img src="/images/shop/title_03.jpg" /></dt>
<dd>
<p class="cp_tit">别致 M1 <span>双模</span> </p>
<p class="cp_info">标配：M1产品、红外遥控器 HDMI高清线 、电源线。 </p>
<p class="cp_price">￥799</p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg" align="absmiddle" style="margin-left:10px;"/></a>
</p>
<p class="cp_bg"><img src="/images/shop/cp_05.jpg" /></p>
</dd>
<dd>
<p class="cp_tit">别致 M1A <span>双模</span> </p>
<p class="cp_info">标配：M1A产品、魔幻遥控器 HDMI高清线 、电源线、充电线。 </p>
<p class="cp_price">￥899</p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg" align="absmiddle" style="margin-left:10px;"/></a>
</p>
<p class="cp_bg"><img src="/images/shop/cp_06.jpg" /></p>
</dd>
</dl>
<dl>
<dt><img src="/images/shop/title_01.jpg" /></dt>
<dd>
<p class="cp_tit">别致 H1A <span>时尚版</span> </p>
<p class="cp_info">标配：H1A产品、红外遥控器 HDMI高清线 、电源线。 </p>
<p class="cp_price">￥459</p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg" align="absmiddle" style="margin-left:10px;"/></a>
</p>
<p class="cp_bg"><img src="/images/shop/cp_02.jpg" /></p>
</dd>
</dl>
</div>
<div class="pj_list">
<dl>
<dt><img src="/images/shop/title_05.jpg" /></dt>
<dd>
<p class="cp_info">别致产品AV线<br />25元 </p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
</p>
<p class="cp_bg"><img src="/images/shop/pj_01.jpg" /></p>
</dd>
<dd>
<p class="cp_info">别致1.5米HDMI高清数据线<br />50元 </p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
</p>
<p class="cp_bg"><img src="/images/shop/pj_02.jpg" /></p>
</dd>
<dd>
<p class="cp_info">别致魔幻遥控器<br />200元 </p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
</p>
<p class="cp_bg"><img src="/images/shop/pj_03.jpg" /></p>
</dd>
<dd>
<p class="cp_info">别致红外遥控器<br />100元 </p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
</p>
<p class="cp_bg"><img src="/images/shop/pj_04.jpg" /></p>
</dd>
<dd>
<p class="cp_info">别致魔幻遥控器充电线<br />25元 </p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
</p>
<p class="cp_bg"><img src="/images/shop/pj_05.jpg" /></p>
</dd>
<dd>
<p class="cp_info">别致产品电源线<br />50元 </p>
<p class="cp_sub">
<a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" /> 加入购物车</a>
</p>
<p class="cp_bg"><img src="/images/shop/pj_06.jpg" /></p>
</dd>
</dl>
</div>
</div>
</div>
<div class="foot_warp" >
<div class="foot_relative" >
<div class="foot_box" >
<div class="foot_serve"><p><img src="/images/shell/f_serve.jpg" ></p></div>
</div>
</div>
<div class="foot_menu">
<dl class="foot_m1">
<dt>关于我们</dt>
<dd><a href="/about/index.html">关于别致</a></dd>
<dd><a href="/about/news.html">新闻中心</a></dd>
<dd><a href="/about/announce.html">隐私声明</a></dd>
<dd><a href="/about/lawdeclare.html">法律声明</a></dd>
</dl>
<dl class="foot_m2">
<dt>分销网络</dt>
<dd><a href="http://routon.tmall.com/" target="_blank">天猫旗舰店</a></dd>
<dd><a href="http://item.jd.com/975596.html" target="_blank">京东商城</a></dd>
<dd><a href="http://item.yhd.com/item/9350934_1?ref=1_1_51_search.keyword_1" target="_blank">1号店</a></dd>
<dd><a href="#" target="_blank">易迅</a></dd>
</dl>
<dl class="foot_m3">
<dt>服务支持</dt>
<dd><a href="/service/index.html">售后政策</a></dd>
<dd><a href="/service/search.html">订单查询</a></dd>
<dd><a href="/service/download.html">相关下载</a></dd>
</dl>
<dl class="foot_m4">
<dt>帮助中心</dt>
<dd><a href="/help/index.html">购物指南</a></dd>
<dd><a href="/help/pay.html">支付方式</a></dd>
<dd><a href="/help/deliver.html">配送方式</a></dd>
</dl>
<dl class="foot_m5">
<dt>关注我们</dt>
<dd><a href="#"><img src="/images/shell/i1.jpg" align="absmiddle"> 新浪微博</a></dd>
<dd><a href="#"><img src="/images/shell/i2.jpg" align="absmiddle"> 腾讯微博</a></dd>
<dd><a href="#"><img src="/images/shell/i3.jpg" align="absmiddle"> 人人网</a></dd>
<dd><a href="#"><img src="/images/shell/i4.jpg" align="absmiddle"> QQ空间</a></dd>
</dl>
<dl class="foot_m6">
<dt>联系我们</dt>
<dd><a href="http://care.live800.com/live800/chatClient/chatbox.jsp?companyID=85741" target="_blank"><img src="/images/shell/f1.jpg" ></a></dd>
</dl>
</div>
</div>
</body>
</html>
<div id="tc_div_4" class="tc_div" style="display:none;">
<p class="close"><span onclick="hide('tc_div_4')"><img src="/images/shop/tc_x.jpg"></span></p>
<dl>
<dt><img src="/images/shop/tc_g.jpg" align="left"><h3>添加成功！</h3>购物车共有<a id= 'cartNum'>12</a>种宝贝</dt>
<dd>
<a href="javascript:void(0);" onclick="hide('tc_div_4')"><img src="/images/shop/tc_01.jpg"></a>
<a href="/shop/order.html"><img src="/images/shop/tc_02.jpg"></a>
</dd>
</dl>
</div>
<SCRIPT src="/script/shop.js" type="text/javascript"></SCRIPT>
分享到：
发表评论
-
ExtJS+FusionCharts(转)
2012-07-27 14:31 2899ExtJS+FusionCharts结合的两种方法如下： ... -
JSP之间传值
2012-06-28 15:36 1047JSP之间传值 JSP1 <html> ... -
Jquery 操作HTML标签
2012-06-28 15:29 1633Jquery 操作Radio ,textarea var ... -
父子窗口传递参数
2012-06-04 14:41 1097下面的代码直接COPY到HTML文件中即可使用！ 1.chi ... -
EXT JS 静态树
2012-05-16 15:19 2210第一：使用代码模式 new Ext.tree.AsyncT ... -
EXT JS ComboBox 获得值的方式
2012-03-14 14:21 3401{ // store:new Ext.data. ... -
ExtJS textfield中添加图片
2011-12-06 10:46 5226new Ext.form.TextField({ ... -
ExtJS 上传后 下载提示的处理
2011-11-30 09:43 13171.首先是Struts.xml的配置 <action n ... -
JS 使用Jquery为<a>设置href
2011-11-07 09:30 5166<a id="sx" href= ... -
js 的
2011-09-23 10:45 953获取Select ： 获取select ... -
Ext 的取值学习
2008-12-17 16:29 2739这几天的使用，对Ext 的一些简单的取值都有了了解，写出来 ...
相关推荐
jquery购物车 实现原理分析
jquery前台购物车模板页面，包含地址填写及修改等一系列的东西。
JQuery 购物车（商品可拖拽到购物车）
simplecart JS购物车 jquery购物车
jQuery购物车自动结算金额效果 jQuery购物车自动结算金额效果
jQuery购物车自动计算金额表单
jquery购物车实时结算特效
jQuery购物车商品数量加减计算代码
jQUery购物车加减计价与全选全不选 jQUery购物车加减计价与全选全不选
jquery购物车完整编译.rar
jQuery购物车自动计算金额表单多数据加减商城购物结算
jQuery购物车自动计算金额表单适用于商城购物结算。
jQuery点击添加到购物车 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
完美模仿淘宝购物车界面， jQuery淘宝购物车页面商品结算
3种jquery实现的购物车页面。包括商品拖动到购物车，.net实现的xml格式！
jQuery购物车商品数量加减合计代码是一款购物网站常用的购物车数量加减，勾选删除，添加行数，总计等。
jQuery购物车自动计算金额表单适应于商城购物结算.zip
jQuery购物车商品数量增加减少代码基于jquery.2.0.0.min.js制作，界面简洁，功能简单。