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技术专栏