用cookie实现叶卡的记忆功能
生活随笔
收集整理的這篇文章主要介紹了
用cookie实现叶卡的记忆功能
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
之前在寫葉卡切換的時(shí)候總需要把js代碼寫到html標(biāo)簽里面。
后來接觸了閉包后知到一點(diǎn)點(diǎn)怎么通過閉包實(shí)現(xiàn)該功能。
之后又想通過cookie來記憶葉卡的當(dāng)前位置。
代碼如下：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
.cl{
clear:both;
}
#menu{
width:600px;
height:30px;
}
#menu div{
display:inline;
float:left;
border:1px solid #000;
margin-left:4px;
width:80px;
height:30px;
line-height:30px;
padding:6px;
}
#menu .menu_on{
background:#FFC;
margin-bottom:-1px;
height:31px;
}
#content{
border:1px solid #000;
width:600px;
margin-left:4px;
}
.c_off{
display:none;
}
</style>
</head>
<body>
<div id="menu">
<div class="menu_off">浙江</div>
<div class="menu_off">滬魯</div>
<div class="menu_off">中西部</div>
<div class="menu_off">其他</div>
</div>
<div id="content" class="cl">
<div class="c_off">浙江</div>
<div class="c_off">滬魯</div>
<div class="c_off">中西部</div>
<div class="c_off">其他</div>
</div>
<script type="text/javascript">
myMenu=document.getElementById("menu");
menuDiv=myMenu.getElementsByTagName("div");
myContent=document.getElementById("content");
contentDiv=myContent.getElementsByTagName("div");
window.onload=function(){
cookieId=1;
cookieId=getCookie('menuId');
menuDiv[cookieId].className="menu_on";
contentDiv[cookieId].className="c_on";
for(var i=0;i<menuDiv.length;i++)
{
menuDiv[i].index=i;
(function(myid)
{
menuDiv[i].onclick=function()
{
for(var i=0;i<menuDiv.length;i++)
{
menuDiv[i].className="menu_off";
contentDiv[i].className="c_off";
}
this.className="menu_on";
contentDiv[myid].className="c_on";
cookieId=this.index;
setCookie('menuId',cookieId,365);
}
})(i);
}
}
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)//名稱，值，過期時(shí)間
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)//setDate() 方法用于設(shè)置一個(gè)月的某一天。調(diào)整過的日期的毫秒表示。getDate月份中的某一天，使用本地時(shí)間。返回值是 1 ~ 31 之間的一個(gè)整數(shù)。
document.cookie=c_name+ "=" +escape(value)+//escape() 函數(shù)可對(duì)字符串進(jìn)行編碼，這樣就可以在所有的計(jì)算機(jī)上讀取該字符串。可以使用 unescape() 對(duì) escape() 編碼的字符串進(jìn)行解碼。
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())//expires為過期時(shí)間。toGMTString() 方法可根據(jù)格林威治時(shí)間 (GMT) 把 Date 對(duì)象轉(zhuǎn)換為字符串，并返回結(jié)果。不贊成使用此方法。請(qǐng)使用 toUTCString() 取而代之！
}
</script>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/scb1901/archive/2011/09/06/2169297.html
總結(jié)
以上是生活随笔為你收集整理的用cookie实现叶卡的记忆功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于C++的职工信息管理系统
- 下一篇： hdu 1754/zstu 3121