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

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

WBOY

Release： 2016-05-16 18:38:01

Original

1087 people have browsed it

[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.