JS代碼實例:實現隨機載入不同的CSS樣式

來源:互聯網
上載者:User
關鍵字 網頁製作 Ajax JavaScript

隨機載入CSS樣式的JS效果實際上很好實現,本文的代碼如下,具體思路是用一個預設的CSS樣式:default.css。 另外再用三個其他名稱的CSS:skin1.css,skin2.css,skin3.css。 當然你可以用更多的樣式表,隨後在載入時進行隨機替換,因為最先載入的default.css樣式是直接寫在頁面上,而JS隨機載入的後面CSS檔會覆蓋之前的CSS,只要CSS中的元素名稱相同即可。

var Init = {


 


       //樣式表檔目錄路徑


baseSkinUrl : "/blog/css/skin/",


 


//樣式表檔案名稱清單


styles : ["default", "skin1", "skin2", "skin3"],


 


//樣式cookie的key值


cookieKey : "css9_blog_random_css",


 


//定義方法,獲取min至max間的亂數,包含min及max


getRandomNum : function(min, max){


return min + Math.floor(Math.random() * (max - min + 1)); 


},


 


//定義方法,獲取cookie值


getCookie : function(name) {


var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;] *)(;|$)"));


if (arr != null) {


return unescape(arr[2]);


}


return null;


},


 


//定義方法,設置cookie值


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 += ";path=" + sPath;


}


if (sDomain) {


sCookie += ";domain=" + sDomain;


}


if (bSecure) {


sCookie += ";secure";


}


document.cookie=sCookie;


},


 


        //定義方法,通過獲取亂數隨機載入CSS


loadCSS : function(){


var length = this.styles.length,


     random = this.getRandomNum(0, length-1),


     cookieStyle = this.getCookie(this.cookieKey),


     currentStyle = "default";


 


//如果當前隨機取到的樣式與cookie中樣式相同,則重新計算亂數


                while(this.styles[random] == cookieStyle)


{


random = this.getRandomNum(0, length-1)


}


 


currentStyle = this.styles[random];


 


//將新樣式存入cookie,cookie有效時間為24小時


this.setCookie(this.cookieKey, currentStyle, 24, "/", "websbook.com", false);


 


//若樣式名稱不為"default"預設樣式,則向<head />標籤中寫入定制樣式


                if(currentStyle != "default")


{


document.write('<link rel="stylesheet" type="text/css"


                  href="' + this.baseSkinUrl + this.styles[random] + '.css" />');


}


}


}


 


Init.loadCSS();

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

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.