| 日付で スタイルチェンジャー ver.2.0 |
||||
◆サンプル ６月１５日〜１０月３１日にアクセスすると ちょっと雰囲気が変わります。 |
||||
| ＜機能と特徴＞ ・アクセスした日付によって 適用する外部スタイルシートを指定できます。 |
||||
 |
|
|
|
|
 |
|
| 公開日 | 2002.9.18 | |||
| 最終更新日 | 2003.6.15 | |||
| バージョン | ver.2.0 | |||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | |||
| cookie | 不使用 | |||
| CSS | 使用 | |||
| 更新履歴 | 2003.6.15 | ver2.0 | スクリプトの簡略化(変更点：全般) | |
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>〜</head>の間に書き込んでください。 ３．ブラウザでテストしてみてください。 正常にスタイルが切り替われば設置は完了です。 |
||||||
|
|
|||||
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
|
|||
|
１．ソース１を<head>〜</head>の間に書き込んでください ２．//設定〜//ここまでの１行目を条件に合わなかった時の 外部スタイルシートのパスに変更してください。 s_d_css[0] = 'css/nomal.css';
３．//設定〜//ここまでの３行目を設定してください。テストなので現在の日付が該当する条件にしてください。 形式は月と日を.[ドット]で区切り、日付と日付を-[ハイフン]で区切ります。 例えば６月１５日から１０月３１日を指定する場合次のようになります。 s_d_dat[1] = '6.15-10.31';
４．//設定〜//ここまでの４行目を条件に合った時に切り替わる外部スタイルシートのパスに変更してください。 s_d_css[1] = 'css/summer.css';
５．ブラウザでテストしてみてください。 正常にスタイルが切り替われば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■複数の条件に当てはまる場合、
条件の[]内の数字の小さいものが優先されます。 |
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■条件を増やす。 //設定〜//ここまでの３〜４行目を２行１組で増やし 該当個所の数字を増やてください。 s_d_dat[2] = "6.15-10.31"; s_d_css[2] = "css/summer.css";次に該当個所を変更してください。 １行目は日付の条件(形式はセッティングの中級者向け解説参照) ２行目は条件に合った時の外部スタイルシートのパスを書き込んでください。 s_d_dat[2] = '6.15-10.31'; s_d_css[2] = 'css/summer.css'; |
||||||
|
|
|||||
 |
 |
|
|
■ソース１(以下のソースを<head>〜</head>の間に書き込んでください) | |
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
//ver.2.0
s_d_css = new Array();
s_d_dat = new Array();
//設定
s_d_css[0] = 'css/nomal.css'; //条件に合わない時のスタイルシート
s_d_dat[1] = '6.15-10.31'; //1個目の日付の条件
s_d_css[1] = 'css/summer.css'; //1個目の条件にあった時のスタイルシート
//ここまで
s_d_Date = new Date();
s_d_year = s_d_Date.getYear();
if(s_d_year < 2000)
{s_d_year += 1900;}
s_d_mon = s_d_Date.getMonth()+1;
s_d_date = s_d_Date.getDate();
s_d_today = (s_d_mon*100)+s_d_date;
s_d_style = 0;
for(i=1;i<s_d_dat.length;i++)
{s_d_temp = s_d_dat[i].split("-");
s_d_temp1 = s_d_temp[0].split(".");
s_d_temp2 = s_d_temp[1].split(".");
s_d_case1 = ((s_d_temp1[0]-0)*100)+(s_d_temp1[1]-0);
s_d_case2 = ((s_d_temp2[0]-0)*100)+(s_d_temp2[1]-0);
if(s_d_case1 <= s_d_case2)
{if(s_d_case1 <= s_d_today && s_d_case2 >= s_d_today)
{s_d_style = i;
break;}}
else if(s_d_case1 > s_d_case2)
{if(s_d_case1 <= s_d_today || s_d_case2 >= s_d_today)
{s_d_style = i;
break;}}}
with(document)
{open();
write('<link href="'+s_d_css[i]+'" rel="stylesheet" type="text/css" />');
close();}
// -->
</script>
 |
|