风云阁资源网

javascript 历史记录 经常用于产品最近历史浏览第1/2页
网络编程 2024/11/18 佚名
3 1
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、如何取得这些信息？下面以京东商城为例子：
javascript 历史记录 经常用于产品最近历史浏览第1/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="/UploadFiles/2021-04-02/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg">京东的价格是做成图片的：
<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"/><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。

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

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
12下一页阅读全文
风云阁资源网 Design By www.bgabc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
风云阁资源网 Design By www.bgabc.com
www.bgabc.com 风云阁资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
风云阁资源网 Design By www.bgabc.com