DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> javascript 歷史記錄 經常用於產品最近歷史浏覽查看
javascript 歷史記錄 經常用於產品最近歷史浏覽查看
編輯：JQuery特效代碼
本文將用js+cookie來實現這一功能，因為最近都在研究jquery，所以也就順便用上了，如果你不想用jquery，那麼你更需要了解實現的過程就可以了，代碼自己去寫。
需要用到一個jquery的cookie插件，用來操作cookie，本站搜索：jquery 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、如何取得這些信息？下面以京東商城為例子：
我們需要取得的就是上面“黃色區域”部分，還有一個是頁面地址。查看其代碼，定位到關鍵部分的代碼塊如下： <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.poluoluo.com/jzxy/UploadFiles_333/201110/2011101021152321.gif'" alt="惠普（HP）Deskjet D2568 彩色噴墨照片打印機" src="/jzxy/UploadFiles_333/201110/2011101021152364.jpg" width="349" jqimg="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/20111010214033233.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.poluoluo.com/jzxy/UploadFiles_333/201110/2011101021152417.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需刷新才能執行]
下面通過代碼講解：
代碼如下:
$(function(){//ready後再獲取
//第一步取得需要寫入cookie的內容
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;//價格
var canAdd = true;//默認可以插入
//第二步，取得cookie並取得已有歷史記錄產品數目,對於cookie的操作，這裡用了jquery的一個插件，你不喜歡，可以用自己的
var hisProduct = $.cookie('hisProduct');
var len = 0;
if(hisProduct){
hisProduct = eval('('+hisProduct+')');//靜普通字符串轉換成json
len = hisProduct.length;
}
//第三步，判斷當前頁面的產皮是否已經在記錄中，用產品名稱去比較
$(hisProduct).each(function(i){
if(this.proname == pro_name){
canAdd = false;//已經存在
return;
}
})
//第四步，可以添加的話。
if(canAdd){
var temp = "[";
var startNum = 0;
if(len > 2){startNum = 1;}//如果已經記錄產品>2，前面說了，最多3個產品，所以這裡其實是3，那麼不需要第一個產品的記錄
for(var m = startNum;m < len;m++){
temp = temp + "{\"url\":\""+hisProduct[m].url+"\",\"imgurl\":\""+hisProduct[m].imgurl+"\",\"proname\":\""+hisProduct[m].proname+"\",\"proprice\":\""+hisProduct[m].proprice+"\"},";
}
temp = temp + "{\"url\":\""+url_+"\",\"imgurl\":\""+imgurl_+"\",\"proname\":\""+proname_+"\",\"proprice\":\""+proprice_+"\"}]";
$.cookie("hisProduct",temp,{ expires:1});//ie6下是否有寫入
}
//第五步，OK，輸出吧
var newtemp = eval('('+$.cookie("hisProduct")+')');
var newtemp_ = "";
for(var n = newtemp.length - 1;n > -1;n--){//這裡你可以輸出為自己要的格式
newtemp_ = newtemp_ + "<li><p><a target='_blank' href='"+newtemp[n].url+"'><img src='"+newtemp[n].imgurl+"' \/><\/a></p>";
newtemp_ = newtemp_ + "<p><a target='_blank' href='>"+newtemp[n].url+"'>"+newtemp[n].proname+"<\/a><\/p>";
newtemp_ = newtemp_ + "<p class='pc'>"+newtemp[n].proprice+"<\/p><\/li>";
}
$("#prohistory").html(newtemp_);//我輸出到prohistory這個div裡面
})
小編推薦
熱門推薦