olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、様々な効果を発揮するスクリプトサンプル設置方法

  1. Home>
  2. その他>
  3. CSS切り替え>
  4. 時間を指定してCSSを変更

CSS切り替えfreename

時間を指定してCSSを変更

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>timecss</title>
<script type="text/javascript" src="timecss.js"></script> 
<noscript>　
<link rel="stylesheet" href="morning.css" type="text/css"/>　
</noscript>
</head>

<body>
  <div>&nbsp;</div>
</body>
</html>

適用する外部CSSファイルを、時間帯によって変更することができるJavascript。
朝、昼、夜といった具合に背景を変えれば、サイトの雰囲気もガラリと変わるので、
リピートユーザーにも楽しんでもらえる。
派手なアクションは無いが、効果はでかい。 
上記のサンプルは、6時～16時までが朝の画像、16時～18時までが夕方の画像、それから18時～6時までが夜、といった感じに変化する。 

ダウンロード

まずダウンロードサイトへ行って、ページ下部で表記しているjavascriptをコピーする。
それを、適当な名前をつけて保存。
このサンプルでは、timecss.jsとしてみた。

<head>～</head>の設定

<script type="text/javascript" src="timecss.js"></script>　

Javascriptをヘッダーに読み込ませる。
JavascriptがOffの状態用に、デフォルトのCSSを読み込ませる記述も設定する。

<script language="JavaScript" type="text/javascript" src="timecss.js"></script>　
<noscript>　
<link rel="stylesheet" href="morning.css" type="text/css"/>　
</noscript>　

これでヘッダーの設定は完了。

設定も導入もかんたんなので、特に説明はいらない。
スクリプトの流れとしては、まず現在の時間を取得して、それをifで分岐させて、適用させるCSSファイルを決定して、最後に<link>で書き出している。  ポイントは何時から何時まで、といった具合には判定させてないところか。

  if (thehour >= 18) 
    display = "night.css";
  else if (thehour >= 16) 
    display = "evening.css";
  else if (thehour >= 6) 
    display = "morning.css";
  else if (thehour >= 0) 
    display = "night.css";
  else
    display = "morning.css";

"display"という変数に適用するCSSファイルを設定する。
時間判定は「以上」という感じにしてみた。
最初にn時から24時までの判定をして、次にそれより小さい時間といった具合に処理している。
まあ、条件判定は自分の好みで変更できるので、24時をまたがない箇所は、論理演算子と合わせて判別させてもいいかも知れない。
ちなみに、取得するのを現在の時間でなく、ブラウザ種別とかにして、判定させれば、ブラウザごとにCSSを判定させるようにも応用できる。 

関連スクリプト

感想

時間帯によって変化させるので、やはり朝昼晩といった区切りが、一番しっくりくるけど、他にも色々応用できそう。例えば、ちょっとフランクな会社のサイトだったら、一日の業務内容にそって変化させたら面白いんじゃないかと思う。
午前中は電話、メール対応ばかりしているような背景にしたり、お昼になったら一人だけ残して皆ご飯に行っている画像にしたり、午後は営業で走り回っているよう画像、就業時間が過ぎたら閑散としたオフィスの画像とか。

遊び心として深夜に一人だけ業務してたり。。。そういう複線的な効果はすごく好き。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。