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下一页阅读全文
标签:
javascript,历史记录

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。