javascript 历史记录经常用于产品最近历史浏览第1/2页

时间：2020-10-03 10:16:49|栏目：jquery|点击：次

本文将用js+cookie来实现这一功能，因为最近都在研究jquery，所以也就顺便用上了，如果你不想用jquery，那么你更需要了解实现的过程就可以了，代码自己去写。
需要用到一个jquery的cookie插件，用来操作cookie，连接https://www.jb51.net/article/18276.htm
需要稍微了解json，资料使用json然为了简单，这里假设浏览记录只记录3个。
基本流程如下：
1、如果cookie中记录的历史产品数目为0或1或2，那么直接在cookie中插入。
2、如果cookie中记录的数目为3(因为我们限定了只能记录3个)，那么将第一组记录的去掉，去掉的方法是重新遍历，但不从第一个开始，而从第二个开始，再插入新的历史记录。

准备：
1、我们要存进去cookie的json字符串类似如下：

复制代码代码如下:

 
var hisProduct = eval[ 
 
{"url":"1.html","imgurl":"1.jpg","proname":"pig1","proprice":100}, 
 
{"url":"2.html","imgurl":"2.jpg","proname":"pig2","proprice":200}, 
 
{"url":"3.html","imgurl":"3.jpg","proname":"pig3","proprice":300} 
 
];

url：是产品的页面url
imgurl：是图片的url
proname：产品名称
proprice：产品价格
2、如何取得这些信息？下面以京东商城为例子：

我们需要取得的就是上面“黄色区域”部分，还有一个是页面地址。查看其代码，定位到关键部分的代码块如下：

<div class="Product_Name"><h1>惠普（HP）Deskjet D2568 彩色喷墨照片打印机</h1><font color="#FF0000" >劲爆价格双墨滴打印技术还原照片本色 </font></div>

<div id="Product_BigImage" class="jqzoom" onclick = "window.open('http://www.360buy.com/bigimage.aspx?id=131407')"><img onerror = "this.src='http://www.360buy.com/images/none/none_347.gif'" alt="惠普（HP）Deskjet D2568 彩色喷墨照片打印机" src="http://img10.360buy.com/S1/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg" width="349" jqimg="http://img10.360buy.com/S0/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg"/></div

京东的价格是做成图片的：

<ul class="Pro_baseinfo"><li><em class="grey">商品编号：131407</em></li><li>市 场 价：<em class="m_line">￥499.00</em></li><li>京 东 价：<img onerror = "this.src='http://www.360buy.com/images/no2.gif'" src ="http://price.360buy.com/P7EDAD82DC8D8212393096333144388F6,3.png"/><a target="_blank" class="link_1" href="http://jd2008.360buy.com/notify.aspx?id=131407&type=1&key=7EDAD82DC8D8212393096333144388F6"">(降价通知我)</a>

用jquery取得我们需要的信息：

复制代码代码如下:

  
$(function(){ 
  
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;//价格 
  
})

补充：这里京东的比较复杂一点，而我们如果是自己写的程序可以给一个要获取的元素一个id。

演示获取(请“运行代码”后刷新一次)：

<!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>无标题文档</title> <script language="javascript" type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript"> $(function(){     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;//价格     document.write("----------------------------------------------------------");     document.write("当期url:"+pro_url+"");     document.write("产品名称："+pro_name+"");     document.write("产品图片：" + pro_img+"");     document.write("产品价格：" + pro_price+"");     document.write("----------------------------------------------------------"); }) </script> </head> <body> <div class="Product_Name"><h1>惠普（HP）Deskjet D2568 彩色喷墨照片打印机</h1><font color="#FF0000" >劲爆价格 双墨滴打印技术还原照片本色 </font></div> <div id="Product_Intro_Left" ><div id="Product_BigImage" class="jqzoom" onclick = "window.open('http://www.360buy.com/bigimage.aspx?id=131407')"><img onerror = "this.src='http://www.360buy.com/images/none/none_347.gif'" alt="惠普（HP）Deskjet D2568 彩色喷墨照片打印机" src="http://img10.360buy.com/S1/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg" width="349" jqimg="http://img10.360buy.com/S0/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg"/></div> <div id="Product_LittleImage"><ul id="mycarousel" class="jcarousel-skin-tango"><li><img onerror = "this.src='http://www.360buy.com/images/none/none_50.gif'" alt="惠普（HP）Deskjet D2568 彩色喷墨照片打印机" src="http://img10.360buy.com/S5/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg" name="809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg"/></li><li><img onerror = "this.src='http://www.360buy.com/images/none/none_50.gif'" alt="惠普（HP）Deskjet D2568 彩色喷墨照片打印机" src="http://img10.360buy.com/S5/666/f09867dc-5d54-4f54-ba39-a8715a28184a.jpg" name="666/f09867dc-5d54-4f54-ba39-a8715a28184a.jpg"/></li><li><img onerror = "this.src='http://www.360buy.com/images/none/none_50.gif'" alt="惠普（HP）Deskjet D2568 彩色喷墨照片打印机" src="http://img10.360buy.com/S5/806/d905fdde-1233-4f98-9913-ff68399b38b0.jpg" name="806/d905fdde-1233-4f98-9913-ff68399b38b0.jpg"/></li><li><img onerror = "this.src='http://www.360buy.com/images/none/none_50.gif'" alt="惠普（HP）Deskjet D2568 彩色喷墨照片打印机" src="http://img10.360buy.com/S5/630/f88e199a-2081-46cb-8bd9-f8dee793f370.jpg" name="630/f88e199a-2081-46cb-8bd9-f8dee793f370.jpg"/></li><li><img onerror = "this.src='http://www.360buy.com/images/none/none_50.gif'" alt="惠普（HP）Deskjet D2568 彩色喷墨照片打印机" src="http://img10.360buy.com/S5/488/295a077c-343c-451b-8d78-91fb80e197db.jpg" name="488/295a077c-343c-451b-8d78-91fb80e197db.jpg"/></li></ul></div><div id="Product_Opp"><img alt="点此查看大图" src="http://www.360buy.com/images/zoom.gif" />&nbsp; <a class="link_1" onerror = "this.src='http://www.360buy.com/images/none/none_150.gif'" target="_blank" href="http://www.360buy.com/bigimage.aspx?id=131407">点此查看大图</a></div></div>                                  <div id="Product_Intro_Right">     <ul class="Pro_baseinfo">     <li><em class="grey">商品编号：131407</em></li> <li>市&nbsp;场&nbsp;价：<em class="m_line">￥499.00</em></li> <li>京&nbsp;东&nbsp;价：<img onerror = "this.src='http://www.360buy.com/images/no2.gif'" src ="http://price.360buy.com/P7EDAD82DC8D8212393096333144388F6,3.png"/></li> </ul> </div><a href="https://www.jb51.net">脚本之家</a> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

12 下一页阅读全文

Easyui使用Dialog行内按钮布局的实例

下面小编就为大家带来一篇Easyui使用Dialog行内按钮布局的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
jQuery 瀑布流浮动布局（一）(延迟AJAX加载图片)

瀑布流：这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部
2012-05-05
jQuery创建平滑的页面滚动(顶部或底部)

如何创建一个平滑的滚动效果是本文的目的使用jQuery让您可以滚动到你的网页的顶部或底部,相当不错的一个效果，感兴趣的你可不要错过了哈
2013-02-02
jquery中ajax调用json数据的使用说明

jquery里提供了便捷的ajax运用，下面总结我自己的一些经验
2011-03-03
jQuery异步上传文件插件ajaxFileUpload详细介绍

这篇文章主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数、错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下
2015-05-05
jQuery实现切换页面过渡动画效果

这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容，在页面加载的时候，使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史，需要的朋友可以参考下
2015-10-10
从Ajax到JQuery Ajax学习

从Ajax到JQuery Ajax学习
2007-02-02
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误

这篇文章主要介绍了firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误,分析了下，原来是利用flash进行post上传时没有包含原来的session信息，而是重新创建了一个session，知道原因了，我们来看看如何解决吧。
2015-03-03
jQuery实现导航栏头部菜单项点击后变换颜色的方法

这篇文章主要介绍了jQuery实现导航栏头部菜单项点击后变换颜色的方法,涉及jQuery响应鼠标事件针对页面元素的遍历及属性变换相关操作技巧,需要的朋友可以参考下
2017-07-07
uploadify 3.0 详细使用说明

uploadify 3.0 详细使用说明,需要的朋友可以参考下
2012-06-06