- ベストアンサー
何度もリピートする、カウントダウンJavaScript
http://www.cj-c.com/java_s/java15.htm こんな感じのカウントダウンのスクリプトのアレンジで、何度も繰り返すものは作れないでしょうか？（秒以下の単位までのもので） 例えば、３日間のカウントダウンで、「あと２日２３時間５９分５９秒５９」からカウントダウンしていって、「あと０日００時間００分００秒０１」になると、また「あと２日２３時間５９分５９秒５９」に戻り、延々と３日間のリピートが繰り返されるものです。 可能であれば、教えて頂きたいです。よろしくお願いします。
- ZUN711
- お礼率80% (4/5)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （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> 時間があってながめてました。複数起動していると誤差が増大していきます。正確に時を刻めないようでした。なのですべての計算を関数の中に移しました。 時間の表示もちょっとだけ細工しました。
その他の回答 (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秒間に１００回もの割り込み処理が発生します 何かの重い処理をされたときに、長時間に渡り正確に時をきざめるかは微妙です とりあえず各行に処理内容を書いときました プログラムは行数も少ないし理解しやすいと思います ページの更新時と関係ないことがわかると思います
お礼
ありがとうございます。 細かいお気遣いに感謝します。
<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> ９時間の誤差の理由を考えてたら時間がなくなってしまった！ お願いばかりせず考えてみてね^^;!
お礼
まったく知識がないもので、申し訳ございません。 お時間かけて頂き、ありがとうございました。 （１番目の方と同じく、ページを更新する度に、あと３日に戻ってしまうようです）
- leap_day
- ベストアンサー率60% (338/561)
こんにちは <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日に変わる瞬間は未確認ですので確認して違っていれば微調整をしてください
お礼
ありがとうございます！ これでテストしてみたいと思います。 本当に感謝します。 ただ、できれば、これで100分の1秒まで表示できればありがたいのですが・・・ （専門知識がないために、大変申し訳ございません）
- auty
- ベストアンサー率58% (284/486)
以下のコードを参考にしてみてください。 ------------------------------------------------------------ <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秒間隔で動きます。
補足
ありがとうございます。早速のご回答、感謝します。 ただ、すみませんが、ちょっと求めているものとは違っています。 これは、ページを開く度に「あと３日」に戻ってしまうようです。 そうではなくて、例えば、3/30の時点で「あと３日」だったら、普通にカウントダウンしていくと、4/2で「０」になります。その時点で、また「あと３日」のカウントダウンが始まる・・・ つまり、この例でいくと、4/2、4/5、4/8、4/11・・・が期限の日になるようなものです。 （あと、一応、1/100秒の単位のものが希望なのですが）
お礼
本当にありがとうございます！！ それでは、これで試してみたいと思います。 お時間かけて頂き、感謝です。