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

解決済

質問者：ZUN711
質問日時：2008/03/30 01:49
回答数：5件

http://www.cj-c.com/java_s/java15.htm
こんな感じのカウントダウンのスクリプトのアレンジで、何度も繰り返すものは作れないでしょうか？（秒以下の単位までのもので）

例えば、３日間のカウントダウンで、「あと２日２３時間５９分５９秒５９」からカウントダウンしていって、「あと０日００時間００分００秒０１」になると、また「あと２日２３時間５９分５９秒５９」に戻り、延々と３日間のリピートが繰り返されるものです。

可能であれば、教えて頂きたいです。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： _pipi_
回答日時：2008/03/31 10:03

<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>
時間があってながめてました。複数起動していると誤差が増大していきます。正確に時を刻めないようでした。なのですべての計算を関数の中に移しました。
時間の表示もちょっとだけ細工しました。

- 0
- 件

通報する

この回答へのお礼

本当にありがとうございます！！
それでは、これで試してみたいと思います。

お時間かけて頂き、感謝です。

通報する

お礼日時：2008/03/31 10:43

No.4

回答者： _pipi_
回答日時：2008/03/31 09:36

<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秒間に１００回もの割り込み処理が発生します
何かの重い処理をされたときに、長時間に渡り正確に時をきざめるかは微妙です
とりあえず各行に処理内容を書いときました
プログラムは行数も少ないし理解しやすいと思います
ページの更新時と関係ないことがわかると思います

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2008/03/31 10:41

No.3

回答者： _pipi_
回答日時：2008/03/30 18:19

<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>
９時間の誤差の理由を考えてたら時間がなくなってしまった！
お願いばかりせず考えてみてね^^;!

- 0
- 件

通報する

この回答へのお礼

まったく知識がないもので、申し訳ございません。
お時間かけて頂き、ありがとうございました。

（１番目の方と同じく、ページを更新する度に、あと３日に戻ってしまうようです）

通報する

お礼日時：2008/03/31 01:11

No.2

回答者： leap_day
回答日時：2008/03/30 16:31

こんにちは

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
これでテストしてみたいと思います。
本当に感謝します。

ただ、できれば、これで100分の1秒まで表示できればありがたいのですが・・・
（専門知識がないために、大変申し訳ございません）

通報する

お礼日時：2008/03/31 01:13

No.1

回答者： auty
回答日時：2008/03/30 09:08

以下のコードを参考にしてみてください。

------------------------------------------------------------
<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">

</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秒の単位のものが希望なのですが）

補足日時：2008/03/30 12:54

通報する