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名称为 idhttp://%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文件。保存路径要正确。 运行看看。
2025国考·省考课程试听报名
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
