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

[요구사항 지우기]
웹페이지에 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 메소드를 정의할 필요 없이 쿠키 읽기 및 쓰기 작업을 구현할 수 있습니다. 코드.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.