다음 사례에서는 js를 사용하여 페이지 플로팅 레이어 효과를 구현하고 js를 사용하여 두 가지 방법을 통해 쿠키를 읽고 쓰며 사용자가 광고를 끄는 표시 상태를 달성합니다.
독자는 다음 코드를 html 파일에 복사하여 효과를 시험해 볼 수 있습니다. html의 pre 태그에는 두 가지 js 구현 방법이 있습니다.
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE HTML>
<html>
<머리>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<meta content="양카이" name="설명"/>
<meta name="author" content="http://blog.csdn.net/tianyazaiheruan"/>
<meta name="copyright" content="저작권은 양카이"/>
<title>IT_Blog_양카이</title>
</head>
<본문>
<div>
이 기사의 작성자: IT_Blog_Yang Kai
전재시 출처를 밝혀주세요: <a href=”http://blog.csdn.net/yangkai_hudong”>http://blog.csdn.net/yangkai_hudong</a>
</div>
<br>
<div>
<예비>
1. 첫 번째: jQuery의 쿠키 라이브러리 사용
예시는 현재 사용되고 있는 js입니다. 관련 코드는 다음과 같습니다.
$(문서).ready(함수 () {
var adCookie=$.cookie("docCookie");
//로컬에 쿠키가 없으면 로컬로 항목 쿠키를 씁니다.
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//항목 쿠키가 로컬에 존재하는 경우 플로팅 레이어가 표시되지 않습니다.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//광고를 닫고 플로팅 레이어를 숨깁니다.
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{expires:60});
});
});
//jQuery 쿠키 라이브러리
jQuery.cookie = 함수(이름, 값, 옵션) {
if (typeof value != 'undefine') { // 이름과 값이 주어지면 쿠키를 설정합니다.
옵션 = 옵션 ||
if (값 === null) {
값 = '';
옵션.만료 = -1;
}
var 만료 = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var 날짜;
if (typeof options.expires == '숫자') {
날짜 = 새로운 날짜();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} 또 다른 {
날짜 = 옵션.만료;
}
만료 = '; 만료=' + date.toUTCString(); // 만료 속성을 사용합니다. IE에서는 최대 수명이 지원되지 않습니다.
}
var 경로 = 옵션.경로 ? '; 경로=' + (옵션.경로) : '';
var 도메인 = 옵션.도메인 ? '; 도메인=' + (옵션.도메인) : '';
var 보안 = 옵션.보안': '';
document.cookie = [이름, '=', encodeURIComponent(값), 만료, 경로, 도메인, 보안].join('');
} else { // 이름만 지정하고 쿠키를 가져옵니다.
var 쿠키값 = null;
if (document.cookie && document.cookie != '') {
var 쿠키 = document.cookie.split(';');
for (var i = 0; i < cookie.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// 이 쿠키 문자열이 우리가 원하는 이름으로 시작합니까?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
부서지다;
}
}
}
쿠키 값을 반환합니다.
}
};
2. 두 번째 유형: 쿠키를 운영하는 js 예제를 직접 작성하세요.
관련 js는 다음과 같습니다.
$(문서).ready(함수() {
함수 writeCookie(이름,값)
{
var exp = 새로운 날짜();
exp.setTime(exp.getTime() + 7*24*60*60*1000);
document.cookie = 이름 + "="+ 이스케이프(값) + ";expires=" + exp.toGMTString();
}
//쿠키 읽기
함수 readCookie(이름)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
unescape(arr[2])를 반환합니다.
}또 다른 {
null을 반환;
}
}
var adCookie = readCookie("adCookie");
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//항목 쿠키가 로컬에 존재하는 경우 플로팅 레이어가 표시되지 않습니다.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//광고를 닫고 플로팅 레이어를 숨깁니다.
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
});
});
</pre>
</div>
<!--광고 스타일-->
<스타일 유형="텍스트/css">
본문 {TEXT-ALIGN: 중앙;}
#wapDocCookie{배경색상:rgba(0,0,0,0.7);배경:#4b4b4b/9;너비:100%;텍스트 정렬:센터;위치:고정;패딩:10px 0 5px 0;하단:0 ;왼쪽:0;}
#bkguancha{배경:url(http://static.hudong.com/35/86/26100000006141138683868789461.png) 반복 없음;배경 크기:280px;배경:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) 반복 없음 0 -36px/9;높이:46px;너비:290px;디스플레이:인라인 블록;오버플로:숨김;라인 높이:99em;}
#closeAd{배경:url(http://static.hudong.com/54/88/26100000006141138683883031718.png) 반복 없음 ;배경 크기:12px;배경:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) 반복 없음 -278px 0/9;높이:12px;너비:12px;디스플레이:블록;위치:절대;상단:5px;오른쪽:10px;}
<!--JS 광고 -->
</style>
<script type="text/javascript" src="http://www.huimg.cn/lib/jquery-1.3.2.js"></script>
<스크립트 유형="텍스트/자바스크립트">
$(문서).ready(함수 () {
var adCookie=$.cookie("docCookie");
//로컬에 쿠키가 없으면 로컬로 항목 쿠키를 씁니다.
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//항목 쿠키가 로컬에 존재하는 경우 플로팅 레이어가 표시되지 않습니다.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//광고를 닫고 플로팅 레이어를 숨깁니다.
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{expires:60});
});
});
//jQuery 쿠키 라이브러리
jQuery.cookie = 함수(이름, 값, 옵션) {
if (typeof value != 'undefine') { // 이름과 값이 주어지면 쿠키를 설정합니다.
옵션 = 옵션 ||
if (값 === null) {
값 = '';
옵션.만료 = -1;
}
var 만료 = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var 날짜;
if (typeof options.expires == '숫자') {
날짜 = 새로운 날짜();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} 또 다른 {
날짜 = 옵션.만료;
}
만료 = '; 만료=' + date.toUTCString(); // 만료 속성을 사용합니다. IE에서는 최대 수명이 지원되지 않습니다.
}
var 경로 = 옵션.경로 ? '; 경로=' + (옵션.경로) : '';
var 도메인 = 옵션.도메인 ? '; 도메인=' + (옵션.도메인) : '';
var 보안 = 옵션.보안': '';
document.cookie = [이름, '=', encodeURIComponent(값), 만료, 경로, 도메인, 보안].join('');
} else { // 이름만 지정하고 쿠키를 가져옵니다.
var 쿠키값 = null;
if (document.cookie && document.cookie != '') {
var 쿠키 = document.cookie.split(';');
for (var i = 0; i < cookie.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// 이 쿠키 문자열이 우리가 원하는 이름으로 시작합니까?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
부서지다;
}
}
}
쿠키 값을 반환합니다.
}
};
</script>
<div id="wapDocCookie" 스타일="표시: 없음;">
<a id="bkguancha" href="http://www.baike.com/api.php?m=guancha&a=download" onclick="StatVirtualTraffic(document.referrer,window.location,'stat_hdstat_onclick_survey_wap_doc_foot_download')">클릭 다운로드</a>
<a id="closeAd" href="javascript:void(0)"> </a>
</div>
</body>
</html>