How to implement different styles every time a javascript css web page is loaded_javascript skills

[Clear requirements]
The webpage loads the style sheet default.css and the default style will be displayed. At the same time, in order to achieve multiple styles, three customized styles, skin1.css, skin2.css, and skin3.css, were created. If you load one of the style sheets after loading default.css, the default style will be overwritten and the new style will be displayed;
Skin1.css, skin2.css, skin3.css will be loaded randomly each time, or the default style will be used. One thing to note is that random loading may also result in the same style this time as the last time.
[Implementation Idea]
Use document.write to dynamically write css loading statements into ;
Load the style sheet randomly through the generated random numbers;
Use the cookie mechanism to record the current style to ensure that the next style will be different from the current style.
[Implementation code]
It’s relatively simple, I’ll paste the code directly here with some comments:

Copy code The code is as follows:

var Init = {
//Style sheet file directory path
baseSkinUrl: "/blog/css/skin/",
//Style sheet file name list
styles: ["default", "skin1", "skin2", "skin3"],
//Key value of style cookie
cookieKey: "css9_blog_random_css",
//Define method to get the range from min to max Random number, including min and max
getRandomNum: function(min, max){
return min Math.floor(Math.random() * (max - min 1));
},
//Define method to 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();
                                                                                                       sCookie = ";domain= " sDomain;
}
if (bSecure) {
sCookie = ";secure"; 🎜> //Define method , load CSS randomly by getting a random number
loadCSS: function(){
var length = this.styles.length,
random = this.getRandomNum(0, length-1),
cookieStyle = this.getCookie(this.cookieKey),
                                                      currentStyle = "default"; random] == cookieStyle)
                                                                                                                                                                                                                                                 Enter 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" Default style, then write the custom style into the tag
if(currentStyle != "default")
   {
    document.write('href="' this.baseSkinUrl this.styles[random] '.css" />');
                                             (); //Execute the random loading CSS method


Save the above js code as an Init.js file, and load the js file in .

Usage Tips: If you already use jquery in your web page, you can use the jQuery cookie operation plug-in I introduced before to implement cookie reading and writing operations, without having to define the setCookie and getCookie methods in the code.