ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript CSS Web ページがロードされるたびに異なるスタイルを実装する方法_JavaScript スキル
JavaScript CSS Web ページがロードされるたびに異なるスタイルを実装する方法_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 18:38:011084ブラウズ
[要件をクリア]
Webページはスタイルシートdefault.cssをロードし、デフォルトのスタイルが表示されます。同時に、複数のスタイルを実現するために、skin1.css、skin2.css、skin3.css の 3 つのカスタマイズされたスタイルが作成されました。 default.css をロードした後にスタイル シートの 1 つをロードすると、デフォルトのスタイルが上書きされ、新しいスタイルが表示されます。
Skin1.css、skin2.css、skin3.css が毎回ランダムにロードされます。デフォルトのスタイルが使用されます。注意すべき点は、ランダムにロードすると、今回も前回と同じスタイルになる可能性があるということです。
[実装アイデア]
document.write を使用して CSS 読み込みステートメントを
に動的に書き込みます。 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 の読み取りおよび書き込み操作を実装できます。コード。
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 の読み取りおよび書き込み操作を実装できます。コード。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。