JavaScript CSS Web ページがロードされるたびに異なるスタイルを実装する方法

JavaScript CSS Web ページがロードされるたびに異なるスタイルを実装する方法_JavaScript スキル

WBOY

リリース： 2016-05-16 18:38:01

オリジナル

1055 人が閲覧しました

[要件をクリア]
Webページはスタイルシートdefault.cssをロードし、デフォルトのスタイルが表示されます。同時に、複数のスタイルを実現するために、skin1.css、skin2.css、skin3.css の 3 つのカスタマイズされたスタイルが作成されました。 default.css をロードした後にスタイルシートの 1 つをロードすると、デフォルトのスタイルが上書きされ、新しいスタイルが表示されます。
Skin1.css、skin2.css、skin3.css が毎回ランダムにロードされます。デフォルトのスタイルが使用されます。注意すべき点は、ランダムにロードすると、今回も前回と同じスタイルになる可能性があるということです。
[実装アイデア]
document.write を使用して CSS 読み込みステートメントをに動的に書き込みます。
生成された乱数を使用してスタイルシートをランダムに読み込みます。 > Cookie メカニズムを使用して現在のスタイルを記録し、次のスタイルが現在のスタイルと異なることを確認します。

[実装コード]
これは比較的単純です。コメントを付けてコードをここに直接貼り付けます:

コードをコピーコードは次のとおりです:

 
var Init = { 
//スタイルシートファイルのディレクトリパス
baseSkinUrl: "/blog/css/skin/", 
 //スタイルシートファイル名のリスト
 スタイル: ["default", "skin1", "skin2", "skin3"], 
 //スタイル Cookie のキー値 
 cookieKey: "css9_blog_random_css", 
 //min から範囲を取得するメソッドを定義最小値と最大値を含む乱数 
 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( ); 
 sCookie = ";domain= " sDomain; 
 } 
 if (bSecure) { 
 sCookie = ";secure" 🎜> // メソッドを定義し、ランダムに CSS を取得します。 number 
loadCSS:function(){ 
var length = this.styles.length, 
random = this.getRandomNum(0, length-1), 
 cookieStyle = this.getCookie(this.cookieKey ）、
currentStyle = "デフォルト";ランダム] == cookiestyle）
Cookieは24時間有効です
 "css9.net", false); 
 // スタイル名が "default" デフォルト スタイルでない場合は、カスタム スタイルを  タグに書き込みます 
if(currentStyle != "default ") 
 {
 document.write('href="' this.baseSkinUrl this.styles[random] '.css" / >'); 
 (); //上記の js コードを Init.js ファイルとして保存し、その js ファイルを 。 

使用上のヒント: Web ページですでに jQuery を使用している場合は、前に紹介した jQuery Cookie 操作プラグインを使用して、setCookie メソッドと getCookie メソッドを定義することなく、Cookie の読み取りおよび書き込み操作を実装できます。コード。                