자바스크립트를 사용하여 쿠키를 제어하여 배경 이미지를 표시하고 숨깁니다_javascript 기술

주요 축제 기간 동안 주요 주류 웹사이트의 홈페이지는 축제 의상을 입게 됩니다. 디자이너는 일반적으로 더 나은 시각적 효과를 얻기 위해 큰 배경 이미지를 사용합니다. 물론 일부 사용자는 배경 이미지도 고려해야 합니다. 배경 이미지에 "닫기" 버튼을 배치합니다. 사용자가 "배경 닫기" 버튼을 클릭하면 큰 배경 이미지가 사라집니다.

배경 이미지 표시 및 숨기기를 제어하기 위해 자바스크립트를 사용하고 있으며, 닫기 버튼을 클릭하면 페이지에 배경 이미지가 로드되지 않도록 CSS가 제어됩니다. 동시에 COOKIE 관련 매개변수가 기록됩니다. 쿠키의 유효 기간이 설정되면 쿠키 유효 기간 내에 페이지가 새로 고쳐집니다. 쿠키가 만료되면 배경 이미지가 다시 로드됩니다.

HTML

일반적으로 배경 이미지의 닫기 버튼은 페이지 상단에 배치됩니다. 물론, 이 버튼은 이미 만들어진 이미지입니다.

코드 복사 코드는 다음과 같습니다.

CSS

큰 배경 이미지도 준비해야 합니다. 인터넷에서 큰 배경 이미지를 찾아 CSS를 사용하여 간단한 페이지 레이아웃을 만듭니다.

코드 복사 코드는 다음과 같습니다.*{margin:0; }

body{font:12px/18px "Microsoft Yahei",Tahoma,Arial,Verdana,"5b8b4f53", sans-serif;}

#top{clear:both;width:1000px;height:60px;margin :0 자동 ;overflow:hidden;위치:상대적;}
#close_btn{width:60px;height:20px;position:absolute;right:0;bottom:25px;cursor:pointer;
display:block; z-색인 :2;}



CSS를 배포한 후 페이지에는 아직 아무런 효과가 없습니다. 배경 이미지를 로드하려면 자바스크립트를 사용해야 합니다.

Javascript페이지가 처음 로드될 때(현재 쿠키 등이 설정되어 있지 않음), 완전한 페이지 효과를 표시하려면 물론 배경 이미지를 로드해야 합니다. "닫기" 버튼을 클릭하면 자바스크립트는 페이지에 로드된 배경 이미지를 즉, 표시하지 않고 종료하며, 쿠키 만료 시간을 통해 큰 배경 이미지 표시 여부를 제어하는 ​​쿠키를 설정합니다. . 즉, 다음에 페이지를 새로 고칠 때 쿠키가 만료되지 않은 경우 큰 배경 이미지가 로드되지 않습니다. 그렇지 않으면 다음 코드를 참조하세요.

코드 복사 코드는 다음과 같습니다.$(function(){

if(getCookie(" mainbg")==0){

$(" body,html").css("Background","none");
$("#close_btn").hide();
} else{
$("body").css( "배경","url(images/body_bg.jpg)) 반복 없음 50% 0")
         $("html").css(" 배경","url(images/html_bg.jpg) 반복- x 0 0");
$("#close_btn").show().css("배경","url(images/close_btn.jpg) no-repeat");
}
/ /닫으려면 클릭
$("#close_btn").click(function(){
$("body,html").css(" background","none");
$("# close_btn").hide();
setCookie("mainbg","0");
});
})



분명히 우리는 페이지 요소의 CSS 배경 속성을 설정하여 배경 이미지 로딩을 제어하고 두 가지 사용자 정의 함수인 getCookie() 및 setCookie()를 통해 쿠키를 읽고 설정합니다.

코드 복사 코드는 다음과 같습니다. //쿠키 설정

function setCookie (name,value){

var exp = new Date();
exp.setTime(exp.getTime() 1*60*60*1000) // 유효기간 1시간
document.cookie = name "=" escape (value) ";expires=" exp.toGMTString();
}
//쿠키 가져오기 함수
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )" name "=([^;]*)(;|$)"))
if(arr != null) return unescape(arr[2 ]); null 반환
}