指定の年月日時にcssを自動で切り替えたい

締切済

質問者：cotalow
質問日時：2012/11/16 17:13
回答数：1件

JavaScript初心者です。。

JavaScriptで例えば
2013年1月1日1時11分に外部読み込みのa.cssをb.cssに
ユーザーにリロード操作を促す事無く自動で切り替えたいのですが
可能でしょうか？その場合どのようなスクリプトになりますでしょうか？

アクセス時間によって読み込みcssを切り替える方法は分かったのですが。。
2013年1月1日1時11分以前にアクセスして指定時刻まで待機した場合
リロードするまで表示が切り替わるず。。

教えていだけますと幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2012/11/16 20:03

ひとつのアイデアとして、

CSSは後から読んでも、先に読んでおいても良いかと思います。
指定時間になったら、body（又は必要な要素）にクラスを設定することで、適用するスタイルを変えることが可能です。
ただし、javascriptを用いる以上、スクリプトがオフのブラウザでは何も起きません。

以下、10秒後にCSSを切替える例。
（10秒後を指定日にしてあげるようなイメージで実現できるかと）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">

</style>

</head>
<body>
<div>
<p>背景が緑ならTypeA、黄色ならTypeB
<p>文字の色が赤ならTypeA、青ならTypeB
</div>

<script type="text/javascript">

</script>
</body>
</html>

＞その場合どのようなスクリプトになりますでしょうか？
スクリプトとしては、body読込み直後に実行するようにしておいて、
　1）現在日時を取得
　2）指定時間までの時間を計算
　3）2の時間経過後にbodyのクラスを切り替え

あるいは、もう少し正確にやるなら
3）で1秒前くらいに日付を取得（で1）に戻る）などとして、一定誤差以内で切り替えといったような考え方も可能です。
でも、ローカルＰＣの時間では所詮正確とはいえないので、サーバの時刻を取得するとか（↓）みたいなサービスを利用するとか…
段々、スクリプトも複雑にはなりますけれど。

http://www2.nict.go.jp/aeri/sts/tsp/link/JST.html