javascript产品比较代码

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

javascript产品比较代码

来源：阅读：998 次日期：2014-08-13 16:28:37

温馨提示：小编为您整理了“javascript产品比较代码”,方便广大网友查阅！

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>

<body>

<div><input name="compairid" type="checkbox" id="PRO_523" onclick="Add_del('523','Vewell 57寸专业显示器 V57-H10L')">对比</div>

</body>

</html>

我的js保存的是COMPARE.js文件。保存路径要正确。运行看看。

更多信息请查看IT技术专栏

上一篇：仿阿里巴巴分块导航代码

下一篇：获取文章中的图片img并做点击跳转

手机网站地址：javascript产品比较代码

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！