javascript+css 網頁每次加載不同樣式的實現方法
2024-05-06 14:12:09
供稿：網友
【明確需求】
網頁加載樣式表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及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;
}
