在上一篇文章中曾提到要給自己的微部落格製作多個樣式,然後使用者每次訪問時隨機載入樣式,讓微博在視覺上保持新鮮感。雖然思路與實現都比較簡單,但還是想記錄下來,與大家分享。
【明確需求】
- 網頁載入樣式表default.css,會展現預設風格。同時為實現多種風格,製作了skin1.css,skin2.css,skin3.css三種定製樣式。如果在載入default.css後,再載入其中某一樣式表,則會覆蓋預設風格,展示新風格;
- 每次隨機載入skin1.css、skin2.css、skin3.css,或者使用預設風格。需要注意的一點是,隨機載入也有可能使這一次和上一次的樣式相同。
【實現思路】
- 使用document.write動態向<head />中寫入css載入語句;
- 通過產生的隨機數,隨機載入樣式表;
- 使用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方法。