作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 02:34:42 阅读 我要评论

本文将用js+cookie来实现这一功能,因为最近都在研究jquery,所以也就顺便用上了,如果你不想用jquery,那么你更需要了解实现的过程就可以了,代码自己去写。 需要用到一个jquery的cookie插件,用来操作cookie,连接http://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。 演示获取(请“运行代码”后刷新一次): 无标题文档 惠普(HP)Deskjet D2568 彩色喷墨照片打印机劲爆价格 双墨滴打印技术还原照片本色 点此查看大图商品简介左部结束 商品简介右部开始 商品编号:131407 市 场 价:¥499.00 京 东 价: 脚本之家 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  推荐阅读

  AJAX 仿EXCEL表格功能

仿Excel表格演示 BODY { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e9edf7 } #tbBackground { BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center } #tbDa>>>详细阅读


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

地址:http://www.17bianji.com/kaifa2/JS/28640.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)