栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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


本文将用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、如何取得这些信息?下面以京东商城为例子:

我们需要取得的就是上面“黄色区域”部分,还有一个是页面地址。查看其代码,定位到关键部分的代码块如下: 惠普(HP)Deskjet D2568 彩色喷墨照片打印机劲爆价格 双墨滴打印技术还原照片本色
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"/>京东的价格是做成图片的:
  • 商品编号:131407
  • 市 场 价:¥499.00
  • 京 东 价:http://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。

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

    [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
    12下一页阅读全文
转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号