Implementation of javascript + css webpage loading different styles each time _ javascript skills

A user loads a style randomly during each access, keeping Weibo visually fresh. Although the ideas and implementations are relatively simple, I still want to record them and share them with you. [Clear requirements]
The ult.css sample table shows the default style. At the same time, three custom styles, skin1.css, skin2.css, and skin3.css, were created for multiple types of styles. If default.css is created, and a similar table is loaded, the default style is overwritten and the new style is displayed;
You can use the default style or use the default style. Note that random loading may make the style the same as the previous one.
[Implementation]
Use document. write to dynamically forwardWrite css loading statement;
The style sheet is randomly loaded by the generated random number;
The cookie mechanism is used to record the current style, so that the next style is different from the current style.
[Implementation Code]
This is relatively simple. I will directly paste the code here, which will be slightly annotated:

The Code is as follows:

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, "/", "css9.net", false );
// If the style name is not "default ",Write custom styles into tags
If (currentStyle! = "Default ")
{
Document. write (' Href = "'+ this. baseSkinUrl + this. styles [random] + '.css? 1.1.9 "/> ');
}
}
}
Init. loadCSS (); // execute the random loading CSS method.

Save the above js Code as the Init. js file andLoad the js file.

TIPS: If jquery is already used on your webpage, you can use the jQuery cookie operation plug-in previously introduced to implement cookie read/write operations without defining the setCookie and getCookie methods in the code.