javascript產品比較代碼,通過javascript操作cookie寫入對應的的內容。 更改了前一篇的Bug。并且分頁保存已選內容。
代碼下。(需要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();//創建隱藏的div
$(window).scroll(function(){move();});
open_page();
});
function SetCookie(name,value)//兩個參數，一個是cookie的名子，一個是值
{
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函數
{
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){
//設置存放ID名稱為 "ID"http://%77%77%77%2E%66網站制作%6F學習網%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){//執行新的添加
if(num>3){alert("最多4個比較!");$("#PRO_"+pid).attr("checked",false);return;}
ID_all=pid+ID_all;
SetCookie(pid,name);
}else{//執行的是刪除，然后清除最前的,
if(ID_all!="")ID_all=ID_all.substr(1,ID_all.length-1);
}
}else{
ID_all = pid;
SetCookie(pid,name);
}
//首先設置全部ID
SetCookie(ID,ID_all);
show_();
}
///如果需要更新樣式請在這里的更新，如果更新div則請在上面的創建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網站制作%6F學習網%72%61%73%70%2E%63%6E 網站制作學習網原創
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原創
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文件。運行代碼如下:
<!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寸專業顯示器 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寸多媒體廣告機 V65-SA4DA')">對比</div>
<div class="bi"><input name="compairid" type="checkbox" id="PRO_865" onclick="Add_del('865','Vewell 52寸多媒體廣告機 V52-SA2DA')">對比</div>
</body>
</html>
我的js保存的是COMPARE.js文件。保存路徑要正確。 運行看看。
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
