javascript產(chǎn)品比較代碼
來源:易賢網(wǎng) 閱讀:1061 次 日期:2014-08-13 16:28:37
溫馨提示:易賢網(wǎng)小編為您整理了“javascript產(chǎn)品比較代碼”,方便廣大網(wǎng)友查閱!

javascript產(chǎn)品比較代碼,通過javascript操作cookie寫入對應(yīng)的的內(nèi)容。 更改了前一篇的Bug。并且分頁保存已選內(nèi)容。

代碼下。(需要jquery框架)

// JavaScript Document

$(function(){

 var show_div = $("<div id='forasp_list'></div>");

 $("body").append(show_div); 

 $("#forasp_list").css({position:"relative",width:"135px",height:"auto",border:"solid thin #000 1px;"}).offset({top:300,left:0}).hide();//創(chuàng)建隱藏的div

 $(window).scroll(function(){move();});

 open_page();

});

function SetCookie(name,value)//兩個(gè)參數(shù),一個(gè)是cookie的名子,一個(gè)是值 

 var Days = 30; //此 cookie 將被保存 30 天 

 var exp  = new Date();    //new Date("December 31, 9998"); 

 exp.setTime(exp.getTime() + Days*24*60*60*1000); 

 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 

function getCookie(name)//取cookies函數(shù)        

 var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 

 if(arr != null) return unescape(arr[2]); return null; 

function delCookie(name)//刪除cookie 

 var exp = new Date(); 

 exp.setTime(exp.getTime() - 1); 

 var cval=getCookie(name); 

 if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 

}

function Add_del(pid,name){

//設(shè)置存放ID名稱為 "ID"http://%77%77%77%2E%66網(wǎng)站制作%6F學(xué)習(xí)網(wǎng)%72%61%73%70%2E%63%6E

var ID="ID";

var ID_all = getCookie(ID);

if(ID_all!=null&&ID_all!=""){

 

    var ID_all_a = ID_all.split(",");

    var num =ID_all_a.length;

 var flag =true;

 ID_all="";

 for(var i=0;i<num;i++){

  if(ID_all_a[i]!=pid){

   

   ID_all+=","+ID_all_a[i];

   }else{

   flag=false;

   delCookie(pid);

   }

 }

 if(flag){//執(zhí)行新的添加

 if(num>3){alert("最多4個(gè)比較!");$("#PRO_"+pid).attr("checked",false);return;}

   ID_all=pid+ID_all;

   SetCookie(pid,name);

 }else{//執(zhí)行的是刪除,然后清除最前的,

   if(ID_all!="")ID_all=ID_all.substr(1,ID_all.length-1);

 }

   }else{

 ID_all = pid;

 SetCookie(pid,name);

   }

//首先設(shè)置全部ID

SetCookie(ID,ID_all);

show_();

}

///如果需要更新樣式請?jiān)谶@里的更新,如果更新div則請?jiān)谏厦娴膭?chuàng)建div處更新

function show_(){

   var html_="";

   c_str = getCookie("ID");

   $("#forasp_list").html("");

   if(c_str!=""&&c_str!=null){

   t_c_arr = c_str.split(",");

   t_c_num = t_c_arr.length;

   for(var i=0;i<t_c_num;i++){

      html_+=unescape(getCookie(t_c_arr[i]))+"-<a onclick='del_Self("+t_c_arr[i]+")'>刪除</a><br>";

    } 

 html_+="<br><input type='button' onclick='compair()' value='比較'> <input type='button' onclick='del_all();' value='清空'> <input type=button onclick='hid();' value='隱藏'>";

   $("#forasp_list").html(html_).show();

   move();

   }else{

    hid();

   }  

}

//http://%77%77%77%2E%66網(wǎng)站制作%6F學(xué)習(xí)網(wǎng)%72%61%73%70%2E%63%6E 網(wǎng)站制作學(xué)習(xí)網(wǎng)原創(chuàng)

function open_page(){

   var c_str = getCookie("ID");

   if(c_str!=""&&c_str!=null){

   var t_c_arr = c_str.split(",");

   var t_c_num = t_c_arr.length;

   for(var i=0;i<t_c_num;i++){

      if($("#PRO_"+t_c_arr[i]))$("#PRO_"+t_c_arr[i]).attr("checked",true);

    }

 show_();

   }

}

function hid(){

 $("#forasp_list").hide();

}

function del_Self(pid){

  if($("#PRO_"+pid))$("#PRO_"+pid).attr("checked",false); 

  Add_del(pid,"");

}

function del_all(){

   var c_str = getCookie("ID");

   if(c_str!=""&&c_str!=null){

   t_c_arr = c_str.split(",");

   t_c_num = t_c_arr.length;

   for(var i=0;i<t_c_num;i++){

 if($("#PRO_"+t_c_arr[i]))$("#PRO_"+t_c_arr[i]).attr("checked",false);

    }

   }

   delCookie("ID");

   show_();

}

function move(){//www.forasp.cn原創(chuàng)

 var scrollPos;

if(typeof window.pageYOffset!="undefined")

{scrollPos = window.pageYOffset;

}

else if (typeof document.compatMode != "undefined" && document.compatMode != "BackCompat"){

scrollPos = document.documentElement.scrollTop;

}else if (typeof document.body != "undefined"){

scrollPos = document.body.scrollTop;

}

var obj =$("#forasp_list");

var op = obj.position().top;

obj.offset({"top":300+scrollPos});

//show();

}

//以上為javascript代碼,保存為.js文件。運(yùn)行代碼如下:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>

<head>

<title>工程顯示器</title></head>

<script language="javascript" src="/js/jquery-1.4.4.min.js"></script>

<script language="javascript" src="/js/COMPARE.js"></script>

<body>

<!--頂部開始--><div><input name="compairid" type="checkbox" id="PRO_523" onclick="Add_del('523','Vewell 57寸專業(yè)顯示器 V57-H10L')">對比</div>

<div><input name="compairid" type="checkbox" id="PRO_835" onclick="Add_del('835','三星46寸液晶顯示器 460UX-2')">對比</div>

<div class="bi"><input name="compairid" type="checkbox" id="PRO_864" onclick="Add_del('864','Vewell 65寸多媒體廣告機(jī) V65-SA4DA')">對比</div>

<div class="bi"><input name="compairid" type="checkbox" id="PRO_865" onclick="Add_del('865','Vewell 52寸多媒體廣告機(jī) V52-SA2DA')">對比</div>

</body>

</html>

我的js保存的是COMPARE.js文件。保存路徑要正確。 運(yùn)行看看。

更多信息請查看IT技術(shù)專欄

更多信息請查看腳本欄目
易賢網(wǎng)手機(jī)網(wǎng)站地址:javascript產(chǎn)品比較代碼
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)