Heim > Web-Frontend > js-Tutorial > javascript 历史记录 经常用于产品最近历史浏览第1/2页_jquery

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

PHP中文网
Freigeben: 2016-05-16 18:52:20
Original
1272 Leute haben es durchsucht

javascript 历史记录 经常用于产品最近历史浏览第1/2页_jquery
本文将用js+cookie来实现这一功能,因为最近都在研究jquery,所以也就顺便用上了,如果你不想用jquery,那么你更需要了解实现的过程就可以了,代码自己去写。
需要用到一个jquery的cookie插件,用来操作cookie
需要稍微了解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、如何取得这些信息?下面以京东商城为例子:
javascript 历史记录 经常用于产品最近历史浏览第1/2页_jquery
我们需要取得的就是上面“黄色区域”部分,还有一个是页面地址。查看其代码,定位到关键部分的代码块如下:

惠普(HP)Deskjet D2568 彩色喷墨照片打印机

劲爆价格 双墨滴打印技术还原照片本色


惠普(HP)Deskjet D2568 彩色喷墨照片打印机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"/>


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

  • 商品编号:131407
  • 市 场 价:¥499.00
  • 京 东 价:price.360buy.com/P7EDAD82DC8D8212393096333144388F6,3.png"/>(降价通知我)


    用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。

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


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage