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文件。保存路徑要正確。 運行看看。
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試