자바스크립트 CSS 웹페이지가 로드될 때마다 다른 스타일을 구현하는 방법

자바스크립트 CSS 웹페이지가 로드될 때마다 다른 스타일을 구현하는 방법_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:38:01

원래의

1058명이 탐색했습니다.

[요구사항 지우기]
웹페이지에 default.css 스타일 시트가 로드되고 기본 스타일이 표시됩니다. 동시에 여러 스타일을 구현하기 위해 세 가지 사용자 정의 스타일인 skin1.css, skin2.css 및 skin3.css가 생성되었습니다. default.css를 로드한 후 스타일 시트 중 하나를 로드하면 기본 스타일을 덮어쓰고 새 스타일이 표시됩니다.
Skin1.css, skin2.css, skin3.css는 매번 무작위로 로드됩니다. 기본 스타일이 사용됩니다. 한 가지 주목해야 할 점은 무작위 로딩이 이번에도 지난번과 동일한 스타일로 나타날 수 있다는 것입니다.
[구현 아이디어]
document.write를 사용하여 생성된 난수를 통해 무작위로 스타일 시트를 로드합니다.
다음 스타일이 현재 스타일과 다를 수 있도록 쿠키 메커니즘을 사용하여 현재 스타일을 기록합니다.
[구현 코드]
비교적 간단합니다. 여기에 몇 가지 설명과 함께 코드를 직접 붙여넣겠습니다.

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

 
var Init = { 
//스타일 시트 파일 디렉터리 경로
 baseSkinUrl: "/blog/css/skin/", 
 //스타일 시트 파일 이름 목록
 styles: ["default", "skin1", "skin2", "skin3"], 
 //스타일 쿠키의 키 값 
 cookieKey: "css9_blog_random_css", 
 //min에서 범위를 가져오는 메서드를 정의합니다. min 및 max를 포함한 임의의 숫자를 최대화하려면 
 getRandomNum: function(min, max){ 
 return min Math.floor(Math.random() * (max - min 1)), 
 //쿠키 값을 가져오는 메서드 정의 
 getCookie: function(name) { 
 var arr = document.cookie.match(new RegExp("(^| )" name "=([^;]* ) (;|$)")); 
 if (arr != null) { 
 return unescape(arr[2]); 
 return null; 
 }, 
 //정의 메서드, 쿠키 값 설정 
 setCookie: function(sName,sValue,objHours,sPath,sDomain,bSecure){ 
 var sCookie = sName "=" encodeURIComponent(sValue) 
 if (objHours) { 
 var date = new Date(); 
 var ms = objHours * 3600 * 1000; 
 date.setTime(date.getTime() ms) 
 sCookie = " ;expires=" 날짜 .toGMTString( ); 
                                                                                      sCookie = ";domain= " sDomain; 
 } 
 if (bSecure) { 
 sCookie = ";secure" 🎜> //메소드 정의, 무작위로 CSS를 로드합니다. 숫자 
 loadCSS: function(){ 
 var length = this.styles.length, 
 random = this.getRandomNum(0, length-1), 
 cookieStyle = this.getCookie(this.cookieKey ), 
                                                  현재 스타일 = "기본값"; 무작위] == cookieStyle) 
                                   ~                                                                    쿠키를 입력하세요. 쿠키는 24시간 동안 유효합니다. 
this.setCookie(this.cookieKey, currentStyle, 24, , "css9.net", false) 
 //스타일 이름이 "default" 기본 스타일이 아닌 경우  태그에 사용자 정의 스타일을 씁니다. 
if(currentStyle != "default ") 
   {
    document.write('href="' this.baseSkinUrl this.styles[random] '.css" / >'); 
                                       (); //임의 로딩 CSS 메소드 실행 

 
위 js 코드를 Init.js 파일로 저장하고 . 

사용 팁: 웹 페이지에서 이미 jquery를 사용하고 있다면 앞서 소개한 jQuery 쿠키 작업 플러그인을 사용하여 setCookie 및 getCookie 메소드를 정의할 필요 없이 쿠키 읽기 및 쓰기 작업을 구현할 수 있습니다. 코드.                