"Clear Demand"
The Web page loads the style sheet default.css, showing the default style. At the same time to achieve a variety of styles, the production of skin1.css,skin2.css,skin3.css three custom styles. If you load a default.css and then load one of the style sheets, the default style will be overridden to show the new style;
Load Skin1.css, skin2.css, skin3.css randomly, or use the default style each time. It is important to note that random loading can also make this one and the previous style the same.
"The realization of ideas"
Writes a CSS loading statement dynamically to the Randomly loading the style sheet by generating random numbers;
Use the cookie mechanism to record the current style, making sure the next next style will be different from the current style.
"Implementation Code"
Relatively simple, I will be directly attached to the code, which slightly commented:
Copy Code code as follows:
var Init = {
Style Sheet File directory path
Baseskinurl: "/blog/css/skin/",
List of style sheet file names
Styles: ["Default", "Skin1", "skin2", "skin3"],
Key value for Style cookie
Cookiekey: "Css9_blog_random_css",
Define the method to get the random number between Min and Max, including Min and Max
Getrandomnum:function (min, max) {
return min + math.floor (math.random () * (Max-min + 1));
},
Define method, get cookie value
Getcookie:function (name) {
var arr = Document.cookie.match (New RegExp ("(^|)" + name + "= ([^;] *)(;|$)"));
if (arr!= null) {
Return unescape (arr[2]);
}
return null;
},
Define method, set cookie value
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=" + date.togmtstring ();
}
if (spath) {
SCookie + + ";p ath=" + spath;
}
if (Sdomain) {
SCookie + + ";d omain=" + sdomain;
}
if (bsecure) {
SCookie + = "secure";
}
Document.cookie=scookie;
},
Define methods to randomly load CSS by getting random numbers
Loadcss:function () {
var length = This.styles.length,
Random = This.getrandomnum (0, Length-1),
Cookiestyle = This.getcookie (This.cookiekey),
Currentstyle = "Default";
Recalculate random numbers if the current randomly fetched style is the same as the style in the cookie
while (this.styles[random] = = Cookiestyle)
{
Random = This.getrandomnum (0, Length-1)
}
Currentstyle = This.styles[random];
Save new style to Cookie,cookie valid time is 24 hours
This.setcookie (This.cookiekey, Currentstyle,, "/", "css9.net", false);
Write a custom style to the if (currentstyle!= "Default")
{
document.write (' <link rel= "stylesheet" type= "Text/css"
href= "' + This.baseskinurl + this.styles[random] + '. css '/> ');
}
}
}
Init.loadcss (); Perform a random load CSS method
Save the above JS code as a init.js file and load the JS file in
Tip: If you've already used jquery on your Web page, you can use the jquery cookie manipulation plug-in I described earlier to implement cookies read and write, without having to redefine the Setcookie and GetCookie methods in the code.
