• 締切済み

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

JavaScript初心者です。。 JavaScriptで例えば 2013年1月1日1時11分に外部読み込みのa.cssをb.cssに ユーザーにリロード操作を促す事無く自動で切り替えたいのですが 可能でしょうか？その場合どのようなスクリプトになりますでしょうか？ アクセス時間によって読み込みcssを切り替える方法は分かったのですが。。 2013年1月1日1時11分以前にアクセスして指定時刻まで待機した場合 リロードするまで表示が切り替わるず。。 教えていだけますと幸いです。

回答 全件
ひとつのアイデアとして、 CSSは後から読んでも、先に読んでおいても…

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ひとつのアイデアとして、 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

cotalow
質問者

お礼

ご丁寧にアドバイスいただきありがとうございます！！ 考え方非常に参考になりました。 この考えかたで勉強しながらもう少し試行錯誤してみようと思います！ ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 年月日時分を指定してCSSを切り替えたいです

    javascript初心者です。 時間帯や月だけを指定してCSSを切り替えるコードは見つけられたのですが、 年月日時分までを指定して切り替えるコードをみつけることができず、困っております。 ●年●月●日●時00分までは●.css、 ▲年▲月▲日▲時30分までは▲.css、 というように時間まで指定して、 お正月やお休みの日にも自動更新ができるようにしたいと思っています。 お分かりの方ぜひ教えてください。よろしくお願いします。

  • CSSのことで教えてください

    HTML+CSSでHPを作りました。 CSSは外部フォルダに入れて、HTMLからリンクさせてます。 そして問題なく表示されるのですが、CSSの読み込みが遅いため、HPデザインがバラバラになってしまいます。（CSSを読み込まない状況となりますが、Ｆ５キーでリロードさせると解決します） この遅延を解決する方法はありませんか？ 補足ですが、CSSは2KBで、HPは6KBです。そしてグーグルクロームやファイヤーフォックスでも同じ状況となります。サーバーはすこぶる快適な環境です。（レンサバ） よろしくお願いします。

  • 外部CSSファイルをHPに訪問する度に自動で読み込ませたいんですが...

    cssを学んで日の浅い初学者です。 cssを外部ファイルにして読み込ませているのですが、css、htmlファイルをそれぞれ更新してブラウザで表示させると、htmlの更新は反映されるんですがcssの更新は反映されないんです。 そこでF5(またはブラウザの更新ボタン)を押してやっと更新されたcssが読み込まれるんですが、これを自動でやる方法はありますでしょうか？ 自動でcssファイルをリロード(サイト訪問時1度だけ)するソースはあるのでしょうか？ サイトを更新するたびにレイアウトが崩れ、困っています。。 自分はリロードを手動でやり、思ったとおりの表示にできるのですが、何もしらない訪問者は手動でのリロードはやらないと思うので、古いcssファイルのままだと思うんです。。 どうかご教授願います。

  • safari でcssがききません！

    こんばんは。 仕事でサイトを作っているのですが、Macのsafariでだけまったくcssが効かないという現象にぶちあたってしまいました。 下のように、外部cssを読み込み、文字サイズはcss.jsでwin、mac向けに指定してます。（文字サイズは表示されてます） <link rel="stylesheet" type="text/css" href="css/default.css"/> <script language="javascript" type="text/javascript" src="js/css.js"></script> Macのfirefoxではなんの問題もありません。 cssは覚えたてて経験浅く、どのあたりに原因があるのかさっぱり分かりません…。 どなたか、解決法、参考サイトなどありましたら、教えてください！ よろしくお願いします。

  • JavaScriptからCSSを呼び出す方法

    現在、Noscript時とJavaScript稼働時の呼び出すCSSを分けるため、下記のような設定をしています。whole.cssからJavaScript稼働時のCSSをimportしています。 IE6エラー内容は「'framename' が宣言されていません」です。 記述 <link href="whole.css" rel="stylesheet" type="text/css" id="css"/> <script> framename.document.getElementById ('css').href = 'whole.css'; </script> JavaScript稼働時に呼び込む設定となっています。 IE6のエラー以外他ブラウザーは正常に表示されます。 よろしくお願いします。

  • 印刷時に消したいjavascriptがある

    印刷用のcssを読み込んでいるのですが、 困ったことに、javascriptで無理やり表示している要素がありまして、 そのソースは外部サイトを読み込んでいるので、 こちらサーバーで指定したcssのdisplay:noneは一切ききません。 そこで、印刷時には<script></script>を消すみたいな ことをしたいのですが、そのようなことを可能でしょうか。 javascirptでなくてもphpでも大丈夫です。 cssのmediaとprintのように何かフラグが取得できればいいのですが・・・ ご教授お願いいたします。

  • ０を自動的に入れたいのですが・・

    <script language="javascript"> <!-- var dtToday = new Date; var strMonth; var strDate; var strDay = new Array("<font color=\"red\">日</font>","月","火","水","木","金","<font color=\"blue\">土</font>"); var strHours; var strMinutes; strMonth = dtToday.getMonth() + 1; strDate = dtToday.getDate(); strHours = dtToday.getHours(); strMinutes = dtToday.getMinutes(); document.write(strHours+"時"+strMinutes+"分　　"+strMonth+"月"+strDate+"日 "+strDay[dtToday.getDay()]+"曜日"); //--> </script> あまりスクリプトに関しては詳しいではありません。 コピーペーストを元に時刻の部分を予測で自分で手を加えたものですが、 「０」をどうやって入れるかがわかりません。 このままだと、 ６時１分　９月１日土曜日　 とはなりますが、できれば、時刻の部分を ０６：０１ としたいと思っています。 必ずしもこのスクリプトでなくてもかまいません。 「０」さえ付いてくれればよいのですが・・。 どうぞよろしくご教授ください、お願いします。

  • <head>外での、外部css、外部jsの読み込み

    基本的な質問で失礼します。 <head>内ではなく、たとえば<body>内に外部cssと外部jsを読み込む際、 今まで、以下のようにスクリプトを書いて読み込んでおり、うまくいっていました。 <script type="text/javascript"> document.write('<link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print">'); document.write('<script src="hoge.js" type="text/javascript"></script>'); </script> ところが、あるサイト作成時、上記スクリプトでは効かなくなってしまいました。 （HTML 4.01 Transitional） そこで、<head>内で書くように、以下のように記述したら、うまく機能しました。 <link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print"> <script type="text/javascript" src="hoge.js"></script> 自分の中では、この記述は<head>内で書くときであって、<head>外ではうまく読み込めないと思っていたのです。 そもそも、<head>外なのに、このような書き方をしてよいものでしょうか？ まぁ、きちんと読み込めていて、動きも期待通りだから良いのでしょうが… 皆さん、どのように読み込んでいるのかなっと思い質問してみました。 どうぞ宜しくお願いいたします。

  • CSSの基本的な事

    A　Stylus 使うにせよ、useContent.css 使うのと同様にCSSを書かないといけないということです。 質問：StylusとuseContent.cssはどう違いますか。Stylusは拡張機能 であることしか知りません。 B　ユーザースタイルシートの場合はCSS、ユーザースクリプトの場合はjavascriptの知識が必要 質問：ユーザースタイルシートとはデベロッパーツールを元にして、 ユーザーが記述するものと解釈しました。javascriptはユーザースタイルシートでなく、ユーザースクリプトに関連するのはなぜですか

    • 締切済み
    • CSS
  • ajax後、php,mysqlも一部再読み込み？

    通常は一部でも変更が加わるとページの全てを再読み込みしますが、ajaxを利用すると、変更を加えた部分だけが再読み込みされるところまでは理解しています。 分からないところは、各プログラムへの動作がajaxを使った後の場合と通常の場合ではどのように違うのかです。 下記のような考え方で正しいですか？説明が下手で読みにくく申し訳ないですが、アドバイスをいただけたら嬉しいです。お願いします。 ■htmlは、実行を起こした部分を含めその子要素全てが再読み込みの対象に。 　例えば、↓の<div#ajax>～</div>この間にある子要素の全てが再読み込みされる。それ以外のhtmlやcssは再読み込みされない。 ■cssは、htmlと同じで、その部分で使われているcssが対象。 ■javascriptは、ajaxの場合と通常の場合で違いはなく、常に全てが再読み込みされる(外部ファイル、記述の位置に関係なく)。 ■jquery、php、mysqlも、javascriptと同じで何一つ変わりなく通常通りに動く。 <?php ・includeで外部ファイルを取得 ・様々な処理 ・mysqlに接続して様々な処理 ?> <html> <head> <script type="text/javascript" src="外部ファイルでajaxを記述"></script> <title></title> </head> <body> <?php ・様々な処理 ?> <div id="main"> 　<div id="a"> 　　　<dl>～</dl> 　</div> 　<div id="ajax" onclick="ajaxの処理へ"> 　　　<table>～</table> 　　　<ul>～</ul> 　　　その他様々な処理 　</div> 　<p>～</p> 　<img src=""> </div> <script type="text/javascript"> </script> </body> </html>

    • ベストアンサー
    • AJAX
印刷できない！ブラザーH3230カラーレイザーのトラブル解決
このQ&Aのポイント
  • パソコンで印刷するとエラーが表示されて印刷できない、ブラザー製品のHL-L3230 CDWを使用しています。
  • パソコンはWindows10で、無線LANで接続しています。関連するソフトはエッジとWPS Officeです。
  • トラブル解決のために何度も再起動を試しましたが、まだ印刷できません。電話回線はひかり回線です。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する