这是当年看着书学习修改的代码,用来控制banner的显示与否。
原理:正常情况下显示 banner,当点击关闭按钮时,通过 turnoff(obj); 函数添加一条cookie: guide_status=guide_close ,并设置 CSS display 为 none。通过 readcookie(the_info); 函数读取 cookie ,判断 guide_status=guide_close 是否存在,存在即设置 CSS display 为 none。
函数:
turnoff(obj); function turnoff(obj){ //设置cookie过期时间,这里设为2012发生日 var the_date=new Date("December 21, 2012"); var the_cookie_date=the_date.toUTCString(); //写入cookie+过期时间 document.cookie="guide_status=guide_close;expires="+the_cookie_date; //隐藏banner document.getElementById(obj).style.display="none"; }
该函数以 onclick 事件插入到关闭按钮中: onclick=”javascript:turnoff(‘guidebar’)” ,guidebar 为 banner ID。
readcookie(the_info)
function readcookie(the_info){ var the_cookie=document.cookie; var the_cookie=unescape(the_cookie); //通常浏览器存储的cookie都不止一条记录,因此要将cookie通过’;'拆分 var pair_cookie=the_cookie.split(";"); var property_value=""; //循环遍历pair_cookie数组 for(loop=0;loop<pair_cookie.length;loop++) { property_value=pair_cookie[loop]; //通常每一条cookie记录都有属性和值,用’='分隔,因此用’='拆分 var broken_info=property_value.split("="); //又是数组,获取属性 var the_property=broken_info[0]; //获取属性值 var the_value=broken_info[1]; //属性对应属性值的数组 the_info[the_property]=the_value; //判断是否存在guide_close的值,这里的判断并不严密,有可能存在a=guide_close而不是guide_status=guide_close,因此将值设为比较有标志性的guide_close,欢迎改良 if(the_info[the_property]=="guide_close"){ document.getElementById(‘guidebar’).style.display="none"; } } }
完整代码:
JS部分:
<script type="text/javascript"> function turnoff(obj){ var the_date=new Date("December 21, 2012"); var the_cookie_date=the_date.toUTCString(); document.cookie="guide_status=guide_close;expires="+the_cookie_date; document.getElementById(obj).style.display="none"; } function readcookie(the_info){ var the_cookie=document.cookie; var the_cookie=unescape(the_cookie); var pair_cookie=the_cookie.split(";"); var property_value=""; for(loop=0;loop<pair_cookie.length;loop++) { property_value=pair_cookie[loop]; var broken_info=property_value.split("="); var the_property=broken_info[0]; var the_value=broken_info[1]; the_info[the_property]=the_value; if(the_info[the_property]=="guide_close"){ document.getElementById(‘guidebar’).style.display="none"; } } } //初始化cookie存储数组,估计可以写到HTML中 var cookie_information=new Array(); </script>
HTML部分:
<div id="guidebar"> <a href="#" onclick="javascript:turnoff(‘guidebar’)">关闭</a> <script type="text/javascript">readcookie(cookie_information);</script> </div>