時間帯ごとに表示切替する方法は?

このQ&Aのポイント
  • 指定した時間帯に応じて特定のHTMLファイルを表示する方法
  • 時間帯の判定にはJavaScriptのDateオブジェクトを使用する
  • 条件分岐を使用して、時間帯ごとに異なるHTMLファイルに遷移する
回答を見る
  • ベストアンサー

時間帯○時○分で表示切替

下記ソースで AM9:30分~PM12:00の間 02.htmlを表示 それ以外は、01.htmlを表示させたいのですが AM10:00~AM10:29,AM11:00~AM11:29の時間帯は02.htmlを表示するように 考えたのですが、01.htmlを表示してしまいします。 どこか抜けがありますか? 解決する方法はありますでしょうか? <script type="text/javascript"> <!-- window.onload = function(){ var date = new Date(); // 時間を取得 var hour = date.getHours(); // 何分か取得 var minute = date.getMinutes(); if(hour >= 9 && minute >= 30 && hour < 12){ // 9時30分から12時までは02.html location.href = "02.html"; } else{ location.href = "01.html"; // 上記以外は01.html } } // --> </script>

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

<script> window.onload = function(){ var date = new Date(); var hour = date.getHours(); var minute = date.getMinutes(); if((hour == 9 && minute >= 30) || (hour >=10 && hour < 12)){ alert("02.html"); }else{ alert("01.html"); } } </script>

mattyan36
質問者

お礼

ありがとうございました。

関連するQ&A

  • 1分毎にHTMLを切り替えるJavaScript

    <script> function getImageFile(date){ var dir = 'min_img/'; var ext = 'jpg'; var hour = date.getHours(); if(hour < 10){ hour = '0' + hour; } var minute = date.getMinutes(); if(minute < 10){ minute = '0' + minute; } return dir + hour + minute + '.' + ext; } function updateClock(){ var date = new Date(); var image = getImageFile(date); date.setTime(date.getTime() + 60 * 1000); var next_image = getImageFile(date); $('#clock').fadeOut(1000, function(){ $('#clock') .html('<img src="' + image + '"><img src="' + next_image + '" style="display:none;">') .fadeIn(1000); }); setTimeout('updateClock()', 60 * 1000); } $(document).ready(function(){ updateClock(); }); </script> <body> <div id="clock"></div> </body> 上記のJavaScriptは1分毎に画像が切り替えるものです。 画像でなく、インフレームでHTMLを表示したいのですが、うまくいきません。 <script> function getImageFile(date){ var dir = 'html/'; var ext = 'html'; var hour = date.getHours(); if(hour < 10){ hour = '0' + hour; } var minute = date.getMinutes(); if(minute < 10){ minute = '0' + minute; } return dir + hour + minute + '.' + ext; } function updateClock(){ var date = new Date(); var image = getImageFile(date); date.setTime(date.getTime() + 60 * 1000); var next_image = getImageFile(date); $('#clock').fadeOut(1000, function(){ $('#clock') .html('<a href="' + image + '"></a><a href="' + next_image + '" style="display:none;"></a>') .fadeIn(1000); }); setTimeout('updateClock()', 60 * 1000); } $(document).ready(function(){ updateClock(); }); </script> <body> <iframe id="clock"></a></iframe> </body> 宜しくお願いします。

  • PHPでPCのローカル時刻は取得出来ますでしょうか?

    PHPでPCのローカル時刻は取得出来ますでしょうか? 現在、javascriptで取得しているのですが、これを PHPの変数として取得出来ないか考えております。 javascriptでは下記のように取得して表示させています。 <script type="text/javascript"> var nowtime = new Date(); var hour = nowtime.getHours(); var minute = nowtime.getMinutes(); var second = nowtime.getSeconds(); if(hour < 10) { hour = "0" + hour; } if(minute < 10) { minute = "0" + minute; } if(second < 10) { second = "0" + second; } document.write(hour,minute,second); </script> 例えば現在が12時34分56秒だとしたら、javascriptで 「123456」という6ケタの数字を取得出来ます。 この「123456」を、PHPの変数として使いたいです。 ($jikoku = 123456) どなたかお知恵を拝借出来ませんでしょうか? 何卒宜しくお願い致します。

    • ベストアンサー
    • PHP
  • 時間で画像が切り替わらず困っています。

    時間で表示画像が切り替わるソースをダウンロードして試しています。 そのソースは↓これです。 http://sky.geocities.jp/minamox/jibun-tokei/ 画像ファイルはindex.htmlと同じ階層に置くことになっていますが、別フォルダで管理したいです。そこで「clockimg」というフォルダを作って画像を入れ、index.htmlの8行目を変更してみました。(変えた箇所は下に書きました)が、うまくいきません。 たとえば2:55にアクセスしたときに表示されている画像が、2:56になっても新しい画像にならずずっとそのままなのです。他にも変更する箇所があるのかなと思ってますが、分からないで困っています。お分かりの方ぜひ教えてください。よろしくお願いします。 ▼ソースはこれです。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script> function getImageFile(date){ var dir = './clockimg/';【←ここに「clockimg」を追記しました】 var ext = 'jpg'; var hour = date.getHours(); if(hour < 10){ hour = '0' + hour; } var minute = date.getMinutes(); if(minute < 10){ minute = '0' + minute; } return dir + hour + minute + '.' + ext; } function updateClock(){ var date = new Date(); var image = getImageFile(date); date.setTime(date.getTime() + 60 * 1000); var next_image = getImageFile(date); $('#clock').fadeOut(1000, function(){ $('#clock') .html('<img src="' + image + '"><img src="' + next_image + '" style="display:none;">') .fadeIn(1000); }); setTimeout('updateClock()', 60 * 1000); } $(document).ready(function(){ updateClock(); }); </script> </head> <body> <div id="clock"></div> </body> </html>

  • PCの時間に合わせて画像を変化させたい。

    PCの時間に合わせて画像を変化させたい。 「自分時計」のスクリプトをダウンロードして試しています。「美人時計」のように1分ごとに画像が変わります。 http://sky.geocities.jp/minamox/jibun-tokei/ さっそく動かしてみたところ、PCの時刻と連動して画像が変わるのではなく、アクセスした時間に60秒を足して画像を切り替えてるようです。なので、PC の時間と画像が切り替わるタイミングが一致しません。「美人時計」のように一緒にはできないでしょうか?お分かりの方がいらしたらぜひ教えてください。よろしくお願いします。 ▼ソースはこれです。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js&quot;&gt;&lt;/script&gt; <script> function getImageFile(date){ var dir = './'; var ext = 'jpg'; var hour = date.getHours(); if(hour < 10){ hour = '0' + hour; } var minute = date.getMinutes(); if(minute < 10){ minute = '0' + minute; } return dir + hour + minute + '.' + ext; } function updateClock(){ var date = new Date(); var image = getImageFile(date); date.setTime(date.getTime() + 60 * 1000); var next_image = getImageFile(date); $('#clock').fadeOut(1000, function(){ $('#clock') .html('<img src="' + image + '"><img src="' + next_image + '" style="display:none;">') .fadeIn(1000); }); setTimeout('updateClock()', 60 * 1000); } $(document).ready(function(){ updateClock(); }); </script> </head> <body> <div id="clock"></div> </body> </html>

  • JavaScriptでdocument.fileCreatedDate

    JavaScriptでdocument.fileCreatedDateを使おうとして <script type="text/javascript"> <!-- var date = new Date(document.fileCreatedDate); var year = date.getYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var min = date.getMinutes(); if(year < 2000){year += 1900;} if(month < 10){month = "0" +month;} if(day < 10){day = "0" + day;} if(hour < 10){hour = "0" + hour;} if(min < 10){min = "0" + min;} document.write("作成日:" + year + "年" + month + "月" + day + "日" + hour + "時" + min + "分" + "<BR>"); //--> </script> のようなスクリプトを作ったんですが表示がおかしくなります。 Google chromeでも正常に表示できるようにしたいです。 よろしくおねがいします。

  • javascriptでの時刻表示カスタム

    ホームページを作れと言われた普通のOLです。 htmlとcssは少しだけ触れますが、javascriptは......(T_T) 知人や知り合いの社員共々聞きましたが全滅です..... 本題ですが、javascriptで現在時刻を取得し、それをそれぞれの要素へ反映させたいです。 例えば、 <div class="smample">??月??日??時??分</div>←現在の時刻-3分 <div class="smample">??月??日??時??分</div>←現在の時刻-4分 <div class="smample">??月??日??時??分</div>←現在の時刻 <div class="smample">??月??日??時??分</div>←現在の時刻-15分 <div class="smample">??月??日??時??分</div>←現在の時刻-4分 という具合に表示できれば最高です。 基本的な時刻表示(下記記載のスクリプト)で試行錯誤しましたが、 ??月??日??時5分の場合、-6分とすると「分」の所の表示が0-1となってしまいます。 更に、-4分/-5分といった複数指定もできません。 javascriptにお詳しい方、どうかご教授下さい。 正直凄く困ってます。。。。 <script type="text/javascript"> var get_current_timestamp = function() { var weeks = new Array('日', '月', '火', '水', '木', '金', '土'); var d = new Date(); // 年月日・曜日・時分秒の取得 var month = d.getMonth() + 1; var day = d.getDate(); var week = weeks[ d.getDay() ]; var hour = d.getHours(); var minute = d.getMinutes() - 6; var second = d.getSeconds() + 10; // 1桁を2桁に変換する if (month < 10) {month = "0" + month;} if (day < 10) {day = "0" + day;} if (hour < 10) {hour = "0" + hour;} if (minute < 10) {minute = "0" + minute;} if (second < 10) {second = "0" + second;} // 整形して返却 return d.getFullYear() + "/" + month + "/" + day + "(" + week + ") " + hour + ":" + minute + ":" + second; } // 現在の日付・時刻を表示する document.write(get_current_timestamp()); </script>

  • ちょっと変わった自動更新

    10分ごとに画像が変わるところがあり、そのアドレスは 8月14日11時0分だと http://aaa.bbb/ccc/08141100.gif となっています。 ただし、その画像更新自体が各2分後(00分のデータなら02分、10分のデータなら12分・・・)まで反映されておいません。そのため、2分間はひとつ前のデータを表示する必要があります。 var now = new Date(); //時間取得 var month = now.getMonth()+1; //月 var day = now.getDate(); //日 var hour = now.getHours(); //時 var min = now.getMinutes(); //分 //二ケタ表示 if(month < 10) { month = "0" + month; } if(day < 10) { day = "0" + day; } if(hour < 10) { hour = "0" + hour; } if(min < 10) { min = "0" + min; } location.href = "http://aaa.bbb/ccc/" + month + day + hour + min + ".gif"; 上記の方法で現在時刻の画像が表示されてくれると思うのですが(違ったら指摘お願いします) ifで03分~12分なら画像のアドレス末尾を00.gifにするーとかだと、03-12、13-22、23-32、33-42、43-52、53-02の6つifを作る他ないのでしょうか? また、自動更新に関して「各2分に更新する」といった方法がわかりません。 何かアドバイスいただけると幸いです。

  • 時計が表示できません

    ASP.NET C# でHTMLとJavascriotを使用しWeb画面を作成しているのですが、そこに表示するリアルタイムで動く時計が上手く表示できません。<head runat="server">~</head>にて以下のプログラムを埋め込むと動かす事はできます。 <SCRIPT type="text/javascript"> <!-- function Watch() { now = new Date(); year = now.getYear(); month = now.getMonth()+1; day = now.getDate(); hour = now.getHours(); minute = now.getMinutes(); second = now.getSeconds(); if (year < 1000) { year += 1900 } if (hour < 10) { hour = '0' + hour } if (minute < 10) { minute = '0' + minute } if (second < 10) { second = '0' + second } document.form.watch.value = year+'年' + month + '月' + day   + '日 '+ hour + ':' + minute + ':' + second; setTimeout("Watch()",1000); } document.write('<FORM name=form><name=form><INPUTname=watchsize=27></FORM>'); Watch(); //--> (注:上記プログラムはあるサイトのコピーとなります) ですが、<body>~</body>内の自分が表示させたい位置に埋め込むと、 表示できません。 大変申し訳ないのですが、 わかる方どなたか教えていただけないでしょうか?

  • 取得した時間の表示について。

    現在デジタル時計を表示しています。が この表示の形を変更したいのです。 //以下スクリプト var now:Date; var h:Number, m:Number, s:Number,l:Number,d:Number,o:Number,p:Number; this.onEnterFrame = function() { now = new Date(); d = now.getFullYear(); o = now.getUTCMonth()+1; p = now.getUTCDate(); h = now.getHours(); m = now.getMinutes(); s = now.getSeconds(); l = now.getMilliseconds(); date.text = d; mon.text =o; day.text =p; Hours.text = h; Minute.text = m; Seconds.text = s; mini.text = l; } // このスクリプトでは現在、静止テキスト"/" 、":"を挟み 2006/12/ 2/ 18: 5:974 のように表示されます。 この時計の表示を 06/12/02/18:05:97 のように表示したい(すべてのデータを二桁に)のですが うまくいきません。 何か良い方法がないか探しております よろしくお願いします。

    • ベストアンサー
    • Flash
  • 時間と連動させたい

    いま、どうしてもFlashを使わなくてはならなくて困っています。 常にPCの時間を取得監視しつつ、x時x分x秒になった時にxxを実行させるという物を作りたんですが、どうしたらいいですか。 例えば、15時59分にFlashを開いたとして、16時になったときに外部ファイル(swf)などを読み込んだり、 他のURLに飛ぶようにしたんです。 こんな感じにやってはみたんですが、 指定時間になってwindowは開くんですけど、たくさんwindowが開いてしまいます。 よろしくお願いします。 addEventListener(Event.ENTER_FRAME,timenow); function timenow(event:Event){ var time:Date; time = new Date(); var hour:Number = time.getHours(); var min:Number = time.getMinutes(); var sec:Number = time.getSeconds(); if(hour==16 && min==00 && sec==00){ navigateToURL(new URLRequest("xxx"), "_blank"); } }

専門家に質問してみよう