熱點推薦：
您现在的位置： 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2022-06-13   來源: JSP教程 

　　隨機載入CSS樣式的JS效果實際上很好實現本文的代碼如下具體思路是用一個默認的CSS樣式defaultcss另外再用三個其他名稱的CSSskincssskincssskincss當然你可以用更多的樣式表隨後在載入時進行隨機替換因為最先載入的defaultcss樣式是直接寫在

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

　　var Init = {
 
       //樣式表文件目錄路徑
baseSkinUrl : "/blog/css/skin/"
 
//樣式表文件名稱列表
styles : ["default" "skin" "skin" "skin"]
 
//樣式cookie的key值
cookieKey : "css_blog_random_css"
 
//定義方法獲取min至max間的隨機數包含min及max
getRandomNum : function(min max){
return min + Mathfloor(Mathrandom() * (max min + )); 
}
 
//定義方法獲取cookie值
getCookie : function(name) {
var arr = documentcookiematch(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) {
return unescape(arr[]);
}
return null;
}
 
//定義方法設置cookie值
setCookie : function(sNamesValueobjHourssPathsDomainbSecure){
var sCookie = sName + "=" + encodeURIComponent(sValue);
if (objHours) {
var date = new Date();
var ms = objHours * * ;
datesetTime(dategetTime() + ms);
sCookie += ";expires=" + datetoGMTString();
}
if (sPath) {
sCookie += ";path=" + sPath;
}
if (sDomain) {
sCookie += ";domain=" + sDomain;
}
if (bSecure) {
sCookie += ";secure";
}
documentcookie=sCookie;
}
 
        //定義方法通過獲取隨機數隨機加載CSS
loadCSS : function(){
var length = thisstyleslength
     random = thisgetRandomNum( length)
     cookieStyle = thisgetCookie(thiscookieKey)
     currentStyle = "default";
 
//如果當前隨機取到的樣式與cookie中樣式相同則重新計算隨機數
                while(thisstyles[random] == cookieStyle)
{
random = thisgetRandomNum( length)
}
 
currentStyle = thisstyles[random];
 
//將新樣式存入cookiecookie有效時間為小時
                thissetCookie(thiscookieKey currentStyle "/" "websbookcom" false);
 
//若樣式名稱不為"default"默認樣式則向<head />標簽中寫入定制樣式
                if(currentStyle != "default")
{
documentwrite(<link rel="stylesheet" type="text/css"
                  href=" + thisbaseSkinUrl + thisstyles[random] + css" />);
}
}
}
 
InitloadCSS(); 
 


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20634.html
    《JS 代碼實例:實現隨機加載不同的CSS樣式》本文是由JSP教程免費提供，內容來源於互聯網,本文歸原作者所有。
  • 上一篇文章：

  • 下一篇文章：
    • 相關文章
    主板 CPU 硬盤 內存 顯卡 聲卡 顯示器 光驅 死機
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.