• ベストアンサー

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

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

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

  • ベストアンサー
noname#84373
noname#84373
回答No.5

<html> <body> <input type="text" id="a" size="40"><br> <script> setInterval("t()",10);// 1/100秒単位で呼び出し function t(){ p=9*60*60*1000;//alert(new Date(0).getTime())はAM9:00からだったから t0=24*60*60*1000;//１日の単位 t1=(new Date()).getTime()+p;//1970 AM0:00からの秒数 t2=INT(t1/t0);//1970年から何日目かを求める t3=t2%3;//３日で割り余りの日（追加分）を求める t4=(t2+t3)*t0;//今日から３日単位の余りの日数を加算し、予定日の秒数を計算 t5=t4-t1;//予定時間から現在の時間を引いて、あと何秒かを計算 ms=INT(t5%1000/10); ss=INT(t5/1000)%60; mi=INT(t5/60000)%60; hh=INT(t5/3600000)%24; dd=INT(t5/t0); document.getElementById('a').value='あと '+((dd)?dd+'日と ':'')+num0(hh,2)+"時"+num0(mi,2)+"分"+ss+"."+num0(ms,2)+"秒"; t5-=10; if(t5<0) t5=t0*3; } function INT(n){ return Math.floor(n) } function num0( num, p ){ var s = '00'+ num; return s.substr( s.length-p,p); } </script> </body> </html> 時間があってながめてました。複数起動していると誤差が増大していきます。正確に時を刻めないようでした。なのですべての計算を関数の中に移しました。 時間の表示もちょっとだけ細工しました。

ZUN711
質問者

お礼

本当にありがとうございます！！ それでは、これで試してみたいと思います。 お時間かけて頂き、感謝です。

その他の回答 (4)

noname#84373
noname#84373
回答No.4

<html> <body> <input type="text" id="a"><br> <script> p=9*60*60*1000;//alert(new Date(0).getTime())はAM9:00からだったから t0=24*60*60*1000;//１日の単位 t1=(new Date()).getTime()+p;//1970 AM0:00からの秒数 t2=INT(t1/t0);//1970年から何日目かを求める t3=t2%3;//３日で割り余りの日（追加分）を求める t4=(t2+t3)*t0;//今日から３日単位の余りの日数を加算し、予定日の秒数を計算 t5=t4-t1;//予定時間から現在の時間を引いて、あと何秒かを計算 setInterval("t()",10);// 1/100秒単位で呼び出し function t(){ ms=INT(t5%1000/10);//マイクロ秒？ ss=INT(t5/1000)%60;//秒 mi=INT(t5/60000)%60;//分 hh=INT(t5/3600000)%24;//時 dd=INT(t5/t0);//日数 document.getElementById('a').value=dd+'日 '+hh+":"+mi+":"+ss+"."+ms; t5-=10; if(t5<0) t5=t0*3;//３日分カウンタ追加 } function INT(n){ return Math.floor(n) } </script> </body> </html> ９時間の誤差が判明したので修正。 ＞ページを更新する度に、あと３日に戻ってしまうようです ですが、このプログラムは、1970年からの日数を計算して ３で割り余りを求めて、そこから秒数を計算しています つまりページを更新した時を基準にしてはいません。 なにかの考え違いではないでしょうか？ ３日も眺めているわけにはいかないので確認はできませんが、 多分３日置きに更新されると思います。 時間の更新のために1秒間に１００回もの割り込み処理が発生します 何かの重い処理をされたときに、長時間に渡り正確に時をきざめるかは微妙です とりあえず各行に処理内容を書いときました プログラムは行数も少ないし理解しやすいと思います ページの更新時と関係ないことがわかると思います

ZUN711
質問者

お礼

ありがとうございます。 細かいお気遣いに感謝します。

noname#84373
noname#84373
回答No.3

<html> <body> <input type="text" id="a"> <script> t0=24*60*60*1000; t1=(new Date()).getTime(); t2=INT(t1/t0); t3=t2%3;t4=(t2+t3+1)*t0;t5=t4-t1-9*60*60*1000; setInterval("t()",10); function t(){ ms=INT(t5%1000/10);ss=INT(t5/1000)%60;mi=INT(t5/60000)%60;hh=INT(t5/3600000)%24;dd=INT(t5/t0); document.getElementById('a').value=dd+'日 '+hh+":"+mi+":"+ss+"."+ms; t5-=10; if(t5<0) t5=t0*3; } function INT(n){ return Math.floor(n) } </script> </body> </html> ９時間の誤差の理由を考えてたら時間がなくなってしまった！ お願いばかりせず考えてみてね^^;!

ZUN711
質問者

お礼

まったく知識がないもので、申し訳ございません。 お時間かけて頂き、ありがとうございました。 （１番目の方と同じく、ページを更新する度に、あと３日に戻ってしまうようです）

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは <script type="text/javascript"><!-- base = new Date(2008,2,30); window.onload=function() { display(); } function display() { today = new Date(); day = 2 - Math.floor(((today-base)/(24*60*60*1000))%3); hour = 23 - Math.floor(((today-base)%(24*60*60*1000))/(60*60*1000)) ; minute = 59 - Math.floor(((today-base)%(24*60*60*1000))/(60*1000))%60 ; second = 60 - Math.floor(((today-base)%(24*60*60*1000))/1000)%60%60 ; if(second == 60) { minute += 1; second = 0; } if(minute == 60) { hour += 1; minute = 0; } if(hour == 24) { day += 1; hour = 0; } if(hour < 10) hour = "0" + hour; if(minute < 10) minute = "0" + minute; if(second < 10) second = "0" + second; document.getElementById("count").value = "残り" + day + "日と" + hour + "時間" + minute + "分" + second + "秒"; setTimeout("display()",1000); } //--></script> <input type="text" id="count" size="30" readonly> ※base = new Date(2008,2,30);が基準(スタート)日です(2008.3.30) ※00時から23時に変わる瞬間、0日から2日に変わる瞬間は未確認ですので確認して違っていれば微調整をしてください

ZUN711
質問者

お礼

ありがとうございます！ これでテストしてみたいと思います。 本当に感謝します。 ただ、できれば、これで100分の1秒まで表示できればありがたいのですが・・・ （専門知識がないために、大変申し訳ございません）

  • auty
  • ベストアンサー率58% (284/486)
回答No.1

以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- var days = 3; var sec = 10; var dat1 = 24*60*60*1000; var millenium; function setLastDay() { millenium = new Date(); millenium.setDate(millenium.getDate()+days); } function setLastMinute() { millenium = new Date(); millenium.setSeconds(millenium.getSeconds()+sec); } function display() { var today = new Date() if ( !millenium || (millenium < today) ) setLastDay(); //if ( !millenium || (millenium < today) ) setLastMinute(); var days = Math.floor((millenium-today)/dat1); var milliSec = (millenium-today)%dat1; time1 = Math.floor(milliSec/(60*60*1000)); time2 = Math.floor(milliSec/(60*1000))%60; time3 = Math.floor(milliSec/1000)%60%60; document.f.days.value = "ドラえもん誕生まで、あと　"+days+"日"+time1+"時間"+time2+"分"+time3+"秒"; tid = setTimeout('display()', 1000); } // --> </script> </head> <body bgcolor="#ffffff" link="#ff0000" vlink="#0000ff" onload="display()" onunload="clearTimeout(tid)"><br> <form name="f" action=""> <input type="TEXT" name="days" size="53"> </form> </body> </html> ------------------------------------------------------------ 動きを確かめるために、次のコメントを入れ替えてみてください。 if ( !millenium || (millenium < today) ) setLastDay(); //if ( !millenium || (millenium < today) ) setLastMinute(); setLastMinute()の方は、10秒間隔で動きます。

ZUN711
質問者

補足

ありがとうございます。早速のご回答、感謝します。 ただ、すみませんが、ちょっと求めているものとは違っています。 これは、ページを開く度に「あと３日」に戻ってしまうようです。 そうではなくて、例えば、3/30の時点で「あと３日」だったら、普通にカウントダウンしていくと、4/2で「０」になります。その時点で、また「あと３日」のカウントダウンが始まる・・・ つまり、この例でいくと、4/2、4/5、4/8、4/11・・・が期限の日になるようなものです。 （あと、一応、1/100秒の単位のものが希望なのですが）

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

関連するQ&A

  • カウントダウンJavascript　

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

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

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

  • Java Scriptのカウントダウン

    ホームページでJava Scriptを使って2007年1月1日0時0分0秒までのカウントダウンをしたいのですが、探してもテキストボックスの中に表示される物しか見つかりません。 テキストボックスの中ではなく、ページに直接表示するにはどのように組めばいいですか？ また、できれば2007年になった瞬間にカウントダウンを終了し(-○秒とか表示されたら怪しいですから)、「あけましておめでとうございます」と表示したいです。

  • カウントダウンJavascript

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

  • javascriptについて

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

  • javascript カウントダウンタイマーについて

    下記のサイトのようなカウントダウンタイマーを作成したく 色々と検索してるのですが全然見つかりません。 http://www.countdownbooster.com/ このサイトのように100分の1秒まで表示させて 例えば期限を明日と数字で設定するのではなく サイトに訪れてから●日後や●分後を期限にしたいのです。 尚且つクッキーで期限が切れたら何度訪れても終了！と表示させたいのですが可能でしょうか？ 下記のサイトが訪れてから1週間後に終了と表示されるサイトです。 http://www.successlab.jp/u25/full/ ※但し、100分の1秒まで表示されてません。 例えば7月31日と指定して 残り8日と●時間●分●秒●と 表示出来るJavaScriptはあるのですが 上記のような全てを満たすJavaScriptがありません。 ご存じの方がいたら是非、力をお貸し下さいませんか？ 宜しくお願い致します。

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

    お世話になります。 JavaScriptでカウントダウンをWEBに表示させたいと思っています。 WEBで見つけた3種類を試してみました。 下記、例A　締め切りを1カ月後に指定 <!-- the_day = new Date(2008,11,8) function countdown() { today = new Date() days = Math.floor((the_day-today)/(24*60*60*1000)) hours = Math.floor(((the_day-today)%(24*60*60*1000))/(60*60*1000)) minutes = Math.floor(((the_day-today)%(24*60*60*1000))/(60*1000))%60 seconds = Math.floor(((the_day-today)%(24*60*60*1000))/1000)%60%60 if((the_day - today) > 0){ document.f.days.value = days+"日"+"と"+hours+"時間"+minutes+"分"+seconds+"秒" }else{ document.f.days.value = "締め切りました" } tid = setTimeout('countdown()', 1000) } // --> <body> <FORM NAME=f> <INPUT TYPE=text SIZE=45 NAME=days> </FORM> <SCRIPT Language="JavaScript"> countdown(); </SCRIPT> </body> 以上 ブラウザでの表示「60日と5時間50分18秒」 残り、30日と表示されるべきところが、60日と表示されます。 PCの日付は合ってますし、他の者の環境でも同じ日にちでした。 そこで質問です。 １）試した3種類とも同様の日にちになりました。ということは間違いではなく、何か理由があるのですよね？ ２）<days>を、（-30）にすれば数字的には合うのですが、問題ないでしょうか？ 　　days = Math.floor((the_day-today)/(24*60*60*1000))-30 ３）「22時締め切り」にしたいのですが、時間の指定は出来ないでしょうか？　 初歩以前の質問で申し訳ありませんが、正しい書き方を教えていただければ、嬉しいです。 どうぞよろしくお願い致します。

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

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

  • Flashでカウントダウン

    Flashで、日にちと時間をカウントダウンできるようにしたいです。 たとえば、特定の日とその日の時間を決め、現在の時間から、 「開催まであとXX日XX:XX:XX (例:開催まであと07日02:34:03)」 という表示にし、秒単位でドンドン数字をカウントダウンするようにしたいです。 また、贅沢を言えば、その日、その時間になったら、表示を、 「本日開催！」 に変え、さらにそれから特定の時間（例えば２４時間）が経過したら、 「すでに終了しました」 に出来れば最高です。 素人ですので、もしよろしければ、アクションスクリプトだけでなく、 フレームやレイヤーについても順に教えて頂ければ、幸いです。 使っているのは、Flash MXで、Windows XPです。

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

    ブラウザの「戻る」を押しても有効なカウントダウン 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秒を切っていた場合は ページを自動的にリロードするようにしたいです。 宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する