当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 历史记录 经常用于产品最近历史浏览

Javascript
javascript模仿msgbox提示效果代码
javascript table美化鼠标滑动单元格变色
告诉大家什么是JSON
json 定义
json跟xml的对比分析
jQuery实用技巧
JQuery实现自定义对话框的代码
强烈推荐240多个jQuery插件提供下载
豆瓣网的jquery代码实例
使用 JavaScript 创建可维护的幻灯片效果代码
动感超强的JS图片轮换特效
一个小型js框架myJSFrame附API使用帮助
Javascript入门学习第二篇 js类型
Javascript入门学习第三篇 js运算
Javascript入门学习第四篇 js对象和数组
jQuery基础教程笔记适合js新手
图片自动缩小 点击放大
非常不错的功能强大代码简单的管理菜单美化版
js 新浪的一个图片播放图片轮换效果代码
javascript import css实例代码

Javascript 中的 javascript 历史记录 经常用于产品最近历史浏览


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 435 ::
收藏到网摘: n/a

在很多购物网站,都有“产品的浏览历史记录”,这是个很贴心的功能。
本文将用js+cookie来实现这一功能,因为最近都在研究jquery,所以也就顺便用上了,如果你不想用jquery,那么你更需要了解实现的过程就可以了,代码自己去写。
需要用到一个jquery的cookie插件,用来操作cookie,连接http://www.ruanchen.com/"codetitle">复制代码 代码如下:
下面通过代码讲解:
复制代码 代码如下:

$(function(){//ready后再获取
//第一步取得需要写入cookie的内容
var pro_url = document.URL;//页面地址
var pro_name = $(".Product_Name h1").text();//产品名称
var pro_img = $("#Product_BigImage img")[0].src;//图片路径
var pro_price = $(".Pro_baseinfo li").eq(2).children("img")[0].src;//价格
var canAdd = true;//默认可以插入
//第二步,取得cookie并取得已有历史记录产品数目,对于cookie的操作,这里用了jquery的一个插件,你不喜欢,可以用自己的
var hisProduct = $.cookie('hisProduct');
var len = 0;
if(hisProduct){
hisProduct = eval('('+hisProduct+')');//静普通字符串转换成json
len = hisProduct.length;
}
//第三步,判断当前页面的产皮是否已经在记录中,用产品名称去比较
$(hisProduct).each(function(i){
if(this.proname == pro_name){
canAdd = false;//已经存在
return;
}
})
//第四步,可以添加的话。
if(canAdd){
var temp = "[";
var startNum = 0;
if(len > 2){startNum = 1;}//如果已经记录产品>2,前面说了,最多3个产品,所以这里其实是3,那么不需要第一个产品的记录
for(var m = startNum;m < len;m++){
temp = temp + "{\"url\":\""+hisProduct[m].url+"\",\"imgurl\":\""+hisProduct[m].imgurl+"\",\"proname\":\""+hisProduct[m].proname+"\",\"proprice\":\""+hisProduct[m].proprice+"\"},";
}
temp = temp + "{\"url\":\""+url_+"\",\"imgurl\":\""+imgurl_+"\",\"proname\":\""+proname_+"\",\"proprice\":\""+proprice_+"\"}]";
$.cookie("hisProduct",temp,{ expires:1});//ie6下是否有写入
}
//第五步,OK,输出吧
var newtemp = eval('('+$.cookie("hisProduct")+')');
var newtemp_ = "";
for(var n = newtemp.length - 1;n > -1;n--){//这里你可以输出为自己要的格式
newtemp_ = newtemp_ + "<li><p><a target='_blank' href='"+newtemp[n].url+"'><img src='"+newtemp[n].imgurl+"' \/><\/a></p>";
newtemp_ = newtemp_ + "<p><a target='_blank' href='>"+newtemp[n].url+"'>"+newtemp[n].proname+"<\/a><\/p>";
newtemp_ = newtemp_ + "<p class='pc'>"+newtemp[n].proprice+"<\/p><\/li>";
}
$("#prohistory").html(newtemp_);//我输出到prohistory这个div里面
})

评论 (0) All

登陆 还没注册?