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

Source: Internet
Author: User
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.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.