| 标题 | 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名称为 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文件。保存路径要正确。 运行看看。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。