JS Code example: Achieve Random Loading of different CSS styles

The JS Effect of loading CSS styles randomly is actually very good. The code in this article is as follows. The idea is to use a default CSS style: default.css. CSS with three other names: skin1.css, skin2.css, and skin3.css. Of course, you can use more sample tables to replace them as needed, because the most advanced default.css style is directly written in

The JS Effect of loading CSS styles randomly is actually very good. The code in this article is as follows. The idea is to use a default CSS style: default.css. CSS with three other names: skin1.css, skin2.css, and skin3.css. Of course, you can use more sample tables as needed, because the most advanced default.css style is directly written on the page, and the CSS file after JS random loading will overwrite the previous CSS, as long as the element names in CSS are the same.

Var Init = {
 
// Style table file directory path
BaseSkinUrl: "/blog/css/skin /",
 
// List of style sheet file names
Styles: ["default", "skin1", "skin2", "skin3"],
 
// Key value of the style cookie
CookieKey: "css9_blog_random_css ",
 
// Define a method to obtain a random number between min and max, including min and max
GetRandomNum: function (min, max ){
Return min + Math. floor (Math. random () * (max-min + 1 ));
},
 
// Define a method to obtain the cookie value
GetCookie: function (name ){
Var arr = document. cookie. match (new RegExp ("(^ |)" + name + "= ([^;] *) (; | $ )"));
If (arr! = Null ){
Return unescape (arr [2]);
}
Return null;
},
 
// Define the method and set the cookie value
SetCookie: function (sName, sValue, objHours, sPath, sDomain, bSecure ){
Var sCookie = sName + "=" + encodeURIComponent (sValue );
If (objHours ){
Var date = new Date ();
Var MS = objHours x 3600*1000;
Date. setTime (date. getTime () + MS );
SCookie + = "; expires =" + date. toGMTString ();
}
If (sPath ){
SCookie + = "; path =" + sPath;
}
If (sDomain ){
SCookie + = "; domain =" + sDomain;
}
If (bSecure ){
SCookie + = "; secure ";
}
Document. cookie = sCookie;
},
 
// Define a method to randomly load CSS by obtaining a random number
LoadCSS: function (){
Var length = this. styles. length,
Random = this. getRandomNum (0, length-1 ),
CookieStyle = this. getCookie (this. cookieKey ),
CurrentStyle = "default ";
 
// If the selected style is the same as that in cookie, the random number is recalculated.
While (this. styles [random] = cookieStyle)
{
Random = this. getRandomNum (0, length-1)
}
 
CurrentStyle = this. styles [random];
 
// Save the new style to the cookie. The cookie is valid for 24 hours.
This. setCookie (this. cookieKey, currentStyle, 24, "/", "websbook.com", false );
 
// If the style name is not "default", write the custom style to the If (currentStyle! = "Default ")
{
Document. write ('<link rel = "stylesheet" type = "text/css"
Href = "'+ this. baseSkinUrl + this. styles [random] + '.css"/> ');
}
}
}
 
Init. loadCSS ();