- 締切済み
指定の年月日時にcssを自動で切り替えたい
JavaScript初心者です。。 JavaScriptで例えば 2013年1月1日1時11分に外部読み込みのa.cssをb.cssに ユーザーにリロード操作を促す事無く自動で切り替えたいのですが 可能でしょうか？その場合どのようなスクリプトになりますでしょうか？ アクセス時間によって読み込みcssを切り替える方法は分かったのですが。。 2013年1月1日1時11分以前にアクセスして指定時刻まで待機した場合 リロードするまで表示が切り替わるず。。 教えていだけますと幸いです。
- cotalow
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ひとつのアイデアとして、 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"> <!-- /* Default */ body{ background-color:#fff; } body div{ width : 200px; height : 200px; padding : 1em; color : #f00; background-color : #0f0; } /* Type B */ body.typeB div{ color : #00f; background-color : #ff0; margin : 100px; width : 150px; border : 4px solid #f00; } //--> </style> </head> <body> <div> <p>背景が緑ならTypeA、黄色ならTypeB <p>文字の色が赤ならTypeA、青ならTypeB </div> <script type="text/javascript"> <!-- setTimeout(function(){ document.body.className = "typeB"; }, 10000); //--> </script> </body> </html> ＞その場合どのようなスクリプトになりますでしょうか？ スクリプトとしては、body読込み直後に実行するようにしておいて、 1）現在日時を取得 2）指定時間までの時間を計算 3）2の時間経過後にbodyのクラスを切り替え あるいは、もう少し正確にやるなら 3）で1秒前くらいに日付を取得（で1）に戻る）などとして、一定誤差以内で切り替えといったような考え方も可能です。 でも、ローカルＰＣの時間では所詮正確とはいえないので、サーバの時刻を取得するとか（↓）みたいなサービスを利用するとか… 段々、スクリプトも複雑にはなりますけれど。 http://www2.nict.go.jp/aeri/sts/tsp/link/JST.html
お礼
ご丁寧にアドバイスいただきありがとうございます！！ 考え方非常に参考になりました。 この考えかたで勉強しながらもう少し試行錯誤してみようと思います！ ありがとうございました。