[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 write CSS loading statements to 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.
[ImplementationCode]
This is relatively simple. I will directly paste the code here, which will be slightly annotated:
Copy code 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 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 (); // execute the random loading CSS method.
Save the above JS Code as the init. js file and load the JS file in
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.
