２４時間自動更新で無数回繰り返しカウントダウンする方法

前へ 次へ
このQ&Aのポイント
  • javascriptで指定した時間まで1回だけカウントダウンするスクリプトが作れることは知っています。しかし、私は２４時間を自動更新で無数繰り返しカウントダウンする方法を探しています。具体的には、明日まで（あるいは今日の終わりまで）を24時間形式でカウントダウンし、O時間O分０秒になったら、また、その次の日まであと２４時間０分０秒を永遠に繰り返すスクリプトが必要です。
  • このようなスクリプトを探していますが、現時点で見つかっていません。他のプログラミングコミュニティでも同様の質問がされており、回答が得られていないようです。教えて！gooやエキサイトみんなの相談広場でも同じような質問がされていますが、残念ながら解決策は見つかっていません。
  • このようなスクリプトを作成するための具体的なコードや方法をご存知の方がいらっしゃいましたら、教えていただけると幸いです。よろしくお願いします。
回答を見る
  • ベストアンサー

javascriptについて

javascriptについて ２４時間を自動更新で無数回繰り返しカウントダウンする方法。 javascriptで指定した時間まで1回だけカウントダウンするスクリプトが作れることは知ってます。 「○○日まで、あと何時間何秒何」を1回カウントダウンするというのではなく、「明日まで（あるいは今日の終わりまで）を24時間形式でカウントダウンし、O時間O分０秒になったら、また、その次の日まであと２４時間０分０秒を永遠に繰り返す」スクリプトを探しています。 つまり、２４時間を自動更新で無数繰り返しカウントダウンする方法を探しています。 ※コードを貼っていただければ非常にうれしいです。 ちなみに、こちらの方も同じような質問を「教えて！goo」と「エキサイトみんなの相談広場」でされたようですが、結局どちらも残念な結果に終わっています。 教えて！goo：http://okwave.jp/qa/q6584309.html エキサイトみんなの相談広場：http://soudan.qa.excite.co.jp/qa6584309.html ※是非、皆様の力を貸していただきたい次第です。

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

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

#3です。 ＞javascript」はチンプンカンプンです。 ＞そのまま、コピペして使えるコードを貼ってください。 そのままコピペできるはずなんですけれど、こちらに貼らないとコピペできない理由があるのでしょうか？ 同じものを、記述を少し変えたもの。 （前のものの方がわかりやすいと思いますが、チンプンカンプンなら同でしょう） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <div id="countdown"></div> <script type="text/javascript"> <!-- (function(div){ setInterval(function(){ var dt = new Date(), cd = {value:""}; div(24, "時間", cd, div(60, "分", cd, div(60, "秒", cd, (new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()+1) - dt)/1000 | 0))); document.getElementById("countdown").innerHTML = "あと" + cd.value; }, 500); })(function(d, u, cd, s){ var tmp = s % d; cd.value = (tmp<10?"0":"") + tmp + u + cd.value; return (s - tmp)/d | 0; }); //--> </script> </body> </html>

その他の回答 (6)

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

よくよく考えれば、時間をひっくり返すだけでいいのでは？ <html> <head> <title>test</title> <script type="text/javascript"> window.onload=function(){doCountDown();} function countDown() { var now = new Date(); var hour= now.getHours(); var min= now.getMinutes(); var sec= now.getSeconds(); document.getElementById('cd1').innerHTML= "今は" + hour + "時" + min + "分" + sec + "秒"; now.setHours(-hour); now.setMinutes(-min); now.setSeconds(-sec); var hour= now.getHours(); var min= now.getMinutes(); var sec= now.getSeconds(); if(hour==0 && min==0 && sec==0) hour=24; //例外処理 document.getElementById('cd2').innerHTML= "今日の終わりまであと" + hour + "時間" + min + "分" + sec + "秒"; } function doCountDown() {setInterval(function(){countDown()}, 500);} </script> </head> <body> <div id='cd1'></div> <div id='cd2'></div> </body> </html>

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

今をくらべるのではなく今の１秒前をつかうと便利です <html> <head> <title>test</title> <script type="text/javascript"> window.onload=function(){doCountDown();} function countDown() { var now = new Date(); var hour= now.getHours(); var min= now.getMinutes(); var sec= now.getSeconds(); document.getElementById('cd1').innerHTML= "今は" + hour + "時" + min + "分" + sec + "秒"; now.setSeconds(now.getSeconds() -1); //ここがポイント var hour= 23 - now.getHours(); var min= 59 - now.getMinutes(); var sec= 59 - now.getSeconds(); if(hour==0 && min==0 && sec==0) hour=24; //例外処理 document.getElementById('cd2').innerHTML= "今日の終わりまであと" + hour + "時間" + min + "分" + sec + "秒"; } function doCountDown() {setInterval(function(){countDown()}, 500);} </script> </head> <body> <div id='cd1'></div> <div id='cd2'></div> </body> </html>

lucky520aki
質問者

補足

毎度すみませんが、具体的な理由を僕みたいな度素人にもわかるように教えてください。 是非、お願いします。

noname#158634
noname#158634
回答No.4

＞そのまま、コピペして使えるコードを貼ってください。 ここそういうサイトじゃないんで。

lucky520aki
質問者

補足

こんなのになったのですが、僕のより良いコードないかって思って書きました。 ちょっと補足が変な感じになっちゃってすみませんｗ <html> <head> <title>test</title> <script type="text/javascript"> <!-- function doCountDown() { setInterval('countDown()', 500); } function countDown() { var now = new Date(); var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); var diff = Math.floor((tomorrow.getTime() - now.getTime()) / 1000) + 1; var hour = Math.floor(diff / 3600); diff %= 3600; var min = Math.floor(diff / 60); var sec = diff % 60; document.getElementById('cd').innerHTML= "今日の終わりまであと" + hour + "時間" + min + "分" + sec + "秒"; } //--> </script> </head> <body onload="javacript:doCountDown();"> <div id='cd'></div> </body> </html>

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

参照なさったという、「教えて！goo」で回答していた者ですが、その中のNo4のものがご質問の様になっていると思いますが試してみましたか？ ただし、No3様がもっともな問題点を指摘なさってはいますが… ローカルの時計に頼らず出来る限り正確にやりたい場合は、サーバの時計を利用するか、No3様がご紹介なさっている日本標準時のサービスなどを代わりに利用するのがよいかも。

lucky520aki
質問者

補足

大学ではまだCとC#しかまだ学んでおらず、 「javascript」はチンプンカンプンです。 そのまま、コピペして使えるコードを貼ってください。 是非、よろしくお願いします。

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

setIntervalでの処理が妥当かと。 ただし、javascriptで得られる時刻はあくまでのクライアントマシンの ローカルな時間でしかないので、ただしい時間（もしくはサーバーの時間で） 処理したいのであれば、ajaxなどで定期的にサーバーから時間をもってきて 同期処理をいれないと想定したものにはならないと思います。

lucky520aki
質問者

補足

大学ではまだCとC#しかまだ学んでおらず、 「javascript」はチンプンカンプンです。 そのまま、コピペして使えるコードを貼ってください。 是非、よろしくお願いします。

noname#158634
noname#158634
回答No.1

パートナーサイトというものを知らずによその他人をマルチポスト扱いするのはよくないなあ(笑) で、回答ですけども。 その質問者さんがたまたま理解できなかっただけで答えは出てますよ。 0時と現在時刻の差をsetIntervalで更新して表示。これだけ。

lucky520aki
質問者

補足

大学ではまだCとC#しかまだ学んでおらず、 「javascript」はチンプンカンプンです。 そのまま、コピペして使えるコードを貼ってください。 是非、よろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptでカウントダウンタイマー

    「○時間○分○秒○」 のように、時間から秒以下までを カウントダウンするjavascriptを探しているのですが、 「○日○時間○分○秒○」 のように、日付からカウントダウンする javascriptしか見つけることができません…。 時間からカウントダウンを開始できる javascriptを教えて頂けないでしょうか。 可能であればキャンペーン開始前、終了後に ひとこと設定できると嬉しいです。 （例えば「キャンペーンは終了しました。」など） よろしくお願い致します。

  • Javascriptで自動更新

    あるページを10秒に一度、自動で更新させたいのですがなにかよい方法はありませんか？ このサイトで見かけたスクリプトを試してみても動作しませんでした；； <script language="JavaScript"> <!-- min=60; setTimeout('reload()', min*1000); function reload() { location.href=location.href; } //--> </script> Javascriptで実現する方法があれば教えてください。

  • ブラウザの「戻る」を押しても有効なカウントダウン

    ブラウザの「戻る」を押しても有効なカウントダウン PHPで取得した時間を使ってカウントダウンを表示させるプログラムに 挑戦中なのですが、今の知識で解決出来ない問題が出ているのでご質問させて 頂きました。 PHPで取得した時間が45秒だった場合、残り45秒からカウントダウンが 始まります。javascriptにこの「45」を読み込ませて、45秒から 1秒ずつリアルタイムに秒が減っていくという形です。 0秒が過ぎたら-1秒、-2秒と進んでいきます。 下記のスクリプトで、それが実現出来ました。 －－－－－－－－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- var phpsecond=<?php print date(s) ?>; var countSecond=60; var nowSecond=second; function countdown(){ document.getElementById('countdown').innerHTML=countSecond-nowSecond; nowSecond++; setTimeout('countdown()',1000); } //--> </script> </head> <body onload="countdown()"> －－－－－－－－－－－－－－－－－－－－－－－ ただ問題があって、ずっとこのページを見ている状態であれば 大丈夫なのですが、 ページを移動させた後、ブラウザの「戻る」でこのページに戻ると、 移動していた間の時間が止まってしまい、 ページを移動する直前の秒からカウントダウンが再開してしまいます。 これを何とか、ページに戻ってきた時にすぐ正しい秒を表示し直すように 命令したいのですが可能でしょうか？ 私なりに考えたのが、 PHPの時間とjavascript時間との差をjavascriptに変数で覚えさせれば 常に正しい時間が表示出来るのかなと思いました。 良い記述方法がございましたら、ご教授頂けますと幸いです。 ※それから、このページに戻った際、カウントダウンが0秒を切っていた場合は ページを自動的にリロードするようにしたいです。 宜しくお願い致します。

  • カウントダウンJavascript　

    Javascriptでホームページにカウントダウンを設置しょうと思っているのですが… やはり、こったモノをと本などを買って勉強しています。 そこでお尋ねしたいのですが、残り　○日○時間○分○，○○秒といったように ○，○○秒というのはできるんでしょうか？よろしくお願いします。

  • PHPとjavascriptを融合させたカウントダウンを作りたい

    PHPとjavascriptを融合させたカウントダウンを作りたい 宜しくお願い致します。 現在、アクセスした時刻から時計が「0秒」を指すまでのカウントダウンを 表示させているのですが、 これを、PHPで取得したサーバー時刻を使ったカウントダウンにしたい と思っています。 現在、利用しているjavascriptは、 －－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- function tokei() { date=new Date(); second=date.getSeconds(); var str=60-second; document.getElementById("tokei").innerHTML=str; } //--> </script> <body onload="window.setInterval('tokei()',100)"> －－－－－－－－－－－－－－－－ なのですが、これを、 －－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- function tokei() { second=<?php print date(s) ?>; var str=60-second; document.getElementById("tokei").innerHTML=str; } //--> </script> <body onload="window.setInterval('tokei()',100)"> －－－－－－－－－－－－－－－－ というイメージでカウントダウンさせたいのですが、 何か方法はございますでしょうか？それともPHPを利用する時点で 不可能な話でしょうか？ (試しに後述のスクリプトを実践してみた所、案の定PHPで取得した秒で カウントダウンは止まってしまいます) それでは宜しくお願い致します。

  • カウントダウンJavascript

    Ｗ杯開幕までのJavascriptが欲しいと思ってウェブ上で発見した スクリプトを拝借してきて少しコメントを変えて私のサイトに置きました。 でも、2,3変更したい点が有るのです。 私は素人ですのでどこをどうしたら良いかも分かりません。 本を借りてきて少しずつ勉強しているのですが、 できるなら早い内に完成させたいと思い みなさんのお知恵を拝借させていただこうと思いました。 やりたいことはこうです。 1.秒数のリアルタイム表示 キックオフまで後何秒！という風にもカウントダウンしてみたいのです。 2.残り時間による表示切り替え 残り一日を切ったら「後何時間」という風に自動的に切り変えることはできないのでしょうか。 同様に分→秒→キックオフ→秒（経過）→分（経過）という風にできたら最高なのですが。 3.画像表示 カウンタの時間を画像で表示してみたいのです。 1から9までの数字を書いた画像を用意しておいて 残り365日なら3.gif,6.gif,5.gifと順に並べたいのです。 一度にたくさん質問してしまい申し訳有りません。 どうかよろしくお願いいたします。

  • 何度もリピートする、カウントダウンJavaScript

    http://www.cj-c.com/java_s/java15.htm こんな感じのカウントダウンのスクリプトのアレンジで、何度も繰り返すものは作れないでしょうか？（秒以下の単位までのもので） 例えば、３日間のカウントダウンで、「あと２日２３時間５９分５９秒５９」からカウントダウンしていって、「あと０日００時間００分００秒０１」になると、また「あと２日２３時間５９分５９秒５９」に戻り、延々と３日間のリピートが繰り返されるものです。 可能であれば、教えて頂きたいです。よろしくお願いします。

  • 教えてgooだけ、動画が反映されないのはなぜ？

    エキサイトみんなの相談広場を利用しています。 質問文にYouTubeを貼り付けると、 「みんなの相談広場」はもちろん、 本家のOKWaveやその他のパートナーサイトでも反映されます。 http://okwave.jp/qa/q8595966.html Biglobeみんなの相談室では 「大変申し訳ございませんが、この投稿に添付された画像や動画などは、 「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWaveよりご覧ください。」 と表示され、添付があったことがわかるようになっています。 http://soudan1.biglobe.ne.jp/qa8595966.html しかし教えてgooは、YouTubeが反映されないだけでなく、 Biglobeのように添付があったという案内も表示されません。 http://okwave.jp/qa/q8595966.html 教えてgooはそういう仕様なのでしょうが、なぜだと思いますか？ あなたの考えつく理由をお聞かせください。

  • javascriptを用いたカウントダウンタイマ-

    javascriptを用いた、カウントダウンタイマーの方法を教えて頂けないでしょうか？ 【午前9時からカウント開始】（あと”9時間59分59秒") 　　　　　　↓ 【午後19時に終了】（あと”0時間00分00秒") ※毎日繰り返し （午後19時から午前9時までの間は、何かコメントを表示させておく。） このようなカウントダウンも出来るものなのでしょうか？ 超初心者ですが、独学で勉強したくて色々見てますが…、難しくてなかなか…。 どなたか、お知恵を貸して頂けたら、幸いです。 宜しくお願いします。

  • JavaScriptで毎日カウントダウン土日祝除く

    初めまして、よろしく御願いします。 JavaScriptで毎日カウントダウンをしたいと思っています。 条件１ 0時から10時までカウントダウンをする（月～金） 条件２　土日祝を除く（イレギュラー用に日付指定もできる） 条件３　時間：分：秒：ミリ秒の表示にしたい 以上の条件を満たしたものを作りたいと思っています。 検索をするとカウントダウンは出てくるのですが、 これといって適合するものはなく。。 悩んでいます。 お分かりになる方がいらっしゃいましたらご教示を御願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する