網頁每次載入調用不同CSS樣式表

來源:互聯網
上載者:User

在上一篇文章中曾提到要給自己的微部落格製作多個樣式,然後使用者每次訪問時隨機載入樣式,讓微博在視覺上保持新鮮感。雖然思路與實現都比較簡單,但還是想記錄下來,與大家分享。

【明確需求】

  1. 網頁載入樣式表default.css,會展現預設風格。同時為實現多種風格,製作了skin1.css,skin2.css,skin3.css三種定製樣式。如果在載入default.css後,再載入其中某一樣式表,則會覆蓋預設風格,展示新風格;
  2. 每次隨機載入skin1.css、skin2.css、skin3.css,或者使用預設風格。需要注意的一點是,隨機載入也有可能使這一次和上一次的樣式相同。

【實現思路】

  1. 使用document.write動態向<head />中寫入css載入語句;
  2. 通過產生的隨機數,隨機載入樣式表;
  3. 使用cookie機制記錄當前風格,確保下次下次風格與當前風格一定不同。

【實現代碼】
比較簡單,我這裡就直接貼代碼了,裡面略加註釋:

var Init = {        //樣式表檔案目錄路徑baseSkinUrl : "/blog/css/skin/", //樣式表檔案名稱列表styles : ["default", "skin1", "skin2", "skin3"], //樣式cookie的key值cookieKey : "css9_blog_random_css", //定義方法,擷取min至max間的隨機數,包含min及maxgetRandomNum : 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;},         //定義方法,通過擷取隨機數隨機載入CSSloadCSS : 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, "/", "css9.net", false); //若樣式名稱不為"default"預設樣式,則向<head />標籤中寫入定製樣式                if(currentStyle != "default"){document.write('<link rel="stylesheet" type="text/css"                   href="' + this.baseSkinUrl + this.styles[random] + '.css" />');}}} Init.loadCSS();   //執行隨機載入CSS方法

將上面js代碼儲存為Init.js檔案,並在<head />中載入該js檔案。

【查看效果】
可以去我的微部落格查看效果,多次重新整理效果更好呦  。現在只有三種樣式,以後會逐漸添加更多樣式。

提示: 如果你的網頁中已經使用了jquery,那麼可以用我之前介紹的jQuery cookie操作外掛程式實現cookie的讀寫操作,不必再定義代碼中的setCookie和getCookie方法。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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