時間で
スタイルチェンジャー

ver.2.0
 
 ◆サンプル

  午前6時から午後6時の間にアクセスすると
  ちょっと雰囲気が変わります。
 
    <機能と特徴>
 
 ・アクセスした時間によって
  適用する外部スタイルシートを指定できます。
 



 

公開日 2002.9.18
最終更新日 2003.6.15
バージョン ver.2.0
動作確認 IE6.0,NN4.7,NN7.0,Opera7.0
cookie 不使用
CSS 使用
更新履歴 2003.6.15 ver2.0 スクリプトの簡略化(変更点:全般)  

 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

1.カスタマイズフォームを使って設定をしてください。

2.ソース1を<head>〜</head>の間に書き込んでください。

3.ブラウザでテストしてみてください。
  正常にスタイルが切り替われば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

1.ソース1を<head>〜</head>の間に書き込んでください

2.//設定〜//ここまでの1行目を条件に合わなかった時の
  外部スタイルシートのパスに変更してください。
s_t_css[0] = 'css/nomal.css';
3.//設定〜//ここまでの3行目を設定してください。
  テストなので現在の時間が該当する条件にしてください。
  形式は時と分を:[コロン]で区切り、時間と時間を-[ハイフン]で区切ります。
  時は24時間で書き込んでください。
  例えば午前6時から午後6時を指定する場合次のようになります。
s_t_dat[1] = '6:00-18:00';
4.//設定〜//ここまでの4行目を条件に合った時に
  切り替わる外部スタイルシートのパスに変更してください。
s_t_css[1] = 'css/hiru.css';

5.ブラウザでテストしてみてください。
  正常にスタイルが切り替われば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 
 
ダウンロードする形式を選択してください。

 【スクリプトを1つのページに組み込む】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。

2.右のボタンを押してファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は一括)】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。

2.右のボタンを押して外部ファイルをダウンロードしてください。
 
3.保存した外部ファイルのファイル名を入力してください。
   (ファイルのパスでも可)
 
4.右のボタンを押してHTMLファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は各ページ毎)】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。
 
2.右のボタンを押して外部ファイルをダウンロードしてください。
 
3.保存した外部ファイルのファイル名を入力してください。
   (ファイルのパスでも可)
 
4.右のボタンを押してHTMLファイルをダウンロードしてください。
 
5.複数のページが必要な場合は、カスタマイズフォームで設定をし
  再度HTMLファイルのみダウンロードしてください。
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
条件に合わない時のスタイルシート:
 
 【スタイルを変える条件の設定】 
スタイルを変える条件の数:
☆★☆1個目のスタイル☆★☆
 時間の条件: 分〜 分 
 条件にあった時のスタイルシート:
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
複数の条件に当てはまる場合、
条件の[]内の数字の小さいものが優先されます。
 
 カスタマイズフォーム   補足説明   改造方法 
 
条件を増やす。

 //設定〜//ここまでの3〜4行目を2行1組で増やし
 該当個所の数字を増やてください。
s_t_dat[2] = '6:00-18:00';
s_t_css[2] = 'css/hiru.css';
 次に該当個所を変更してください。
 1行目は日付の条件(形式はセッティングの中級者向け解説参照)
 2行目は条件に合った時の外部スタイルシートのパスを書き込んでください。
s_t_dat[2] = '5:00-6:30';
s_t_css[2] = 'css/yoake.css';
 
 
  

ソース1(以下のソースを<head>〜</head>の間に書き込んでください)  
 
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.2.0

s_t_css = new Array();
s_t_dat = new Array();

//設定 s_t_css[0] = 'css/nomal.css'; //条件に合わない時のスタイルシート
s_t_dat[1] = '6:00-18:00'; //日付の条件 s_t_css[1] = 'css/hiru.css'; //条件にあった時に適用するスタイルシート //ここまで
s_t_Date = new Date(); s_t_hour = s_t_Date.getHours(); s_t_min = s_t_Date.getMinutes(); s_t_now = (s_t_hour*100)+s_t_min; s_t_style = 0;
for(i=1;i<s_t_dat.length;i++) {s_t_temp = s_t_dat[i].split("-"); s_t_temp1 = s_t_temp[0].split(":"); s_t_temp2 = s_t_temp[1].split(":"); s_t_case1 = ((s_t_temp1[0]-0)*100)+(s_t_temp1[1]-0); s_t_case2 = ((s_t_temp2[0]-0)*100)+(s_t_temp2[1]-0); if(s_t_case1 <= s_t_case2) {if(s_t_case1 <= s_t_now && s_t_case2 >= s_t_now) {s_t_style = i; break;}} else if(s_t_case1 > s_t_case2) {if(s_t_case1 <= s_t_now || s_t_case2 >= s_t_now) {s_t_style = i; break;}}}
with(document) {open(); write('<link href="'+s_t_css[i]+'" rel="stylesheet" type="text/css" />'); close();}
// --> </script>


スクリプト無効時にはスタイルシートの切替えは出来ません。
 どうしてもスタイルシートを適用したい場合は
 <head>〜</head>の間に<noscript>〜</noscript>を書き込み
 その間に<link>でスタイルシートを読み込むといいでしょう。

 【HTMLの仕様では<head>〜</head>の間で
  <noscript>〜</noscript>は使えない事になっていますが
  動作確認のブラウザでは問題なく動作します。】


ウェブ木箱サンプル集
copyright(C) 2002-2004 あう