毎日日付の変わるタイミングをカウントダウンした

質問

全くのJAVA初心者です、すみません。
ウェブで色々調べましたが全然やりかたがわからず途方にくれています・・・

WEBページを作っているのですが、
日付変更のタイミングを、カウントダウン表示して、
毎日、それが自動で更新されるような日付カウントダウンをつくりたいのです。

○○日まで、あと○○時間○○秒○○！
というのはウェブで調べられたのですが

【今日の日付変更まであと○○時間○○秒○○！】

のような、日付をカウントして、日付がかわったらまた自動的に

【今日の日付変更まであと23時間59秒99！】

というように、日付が変わったら、その後はまた
自動的にカウントダウンが０からカウントするように
したいのです。

ウェブで調べましたがどうしても見つけられませんでした。

全くの初心者で、やりかたがぜんぜんわからずとても困っています・・
お忙しいところ恐縮ですが、やりかたがおわかりになるかた、
どなたか教えていただけたら、本当にうれしいです・・・

手も足もでません・・・

すみません、どうかよろしくお願いします・・・

回答No.4

fujillin

#1、#2です。

ご提示のスクリプトだと、カウントダウンといっても表示するときに1回だけ「あと○○日」みたいに表示をするものみたいですが、そういうのがよかったのでしょうか？

普通にカウントダウンというとこんなやつをイメージしますが…

<div id="target"></div>

以下スクリプト。（全角空白は半角に）
(function(div) {
　var id = "target"; //←表示用要素のid

　var elm = document.getElementById(id);
　var countdown = function(){
　　var cd = { value:"" }, dt = new Date();
　　var sec = (new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()+1) - dt)/1000 | 0;
　　sec = div(sec, 60, cd, "秒");
　　sec = div(sec, 60, cd, "分");
　　sec = div(sec, 24, cd, "時間");
　　elm.innerHTML = cd.value;
　}
　setInterval(countdown, 500);

})(function(s, d, cd, unit){
　　var tmp = s % d;
　　tmp = (tmp<10?"0":"") + tmp;
　　cd.value = tmp + unit + cd.value;
　　return (s - tmp)/d | 0;
});

お礼

私の説明不足がたたって、何度もお手数をおかけしすみません。
本当にありがとうございます。

補足

何度もありがとうございます！
本当にありがとうございます。

私がやりたいのは1回きりではなく、
自動的に繰り返すカウントダウンです・・

つまり、私が貼り付けたものは違いますね・・。

上記、おしえてくださったものは、カウントダウンを、毎日一定時間に
くりかえすものでしょうか・・？

PS地震が心配です。地域皆様のご無事をいのります。ここもゆれています・・まったくねむれませんでした・・

回答No.3

noname#129900

ページ閲覧者のPC時間が狂っていたら、
JavaScriptのDateで取得した日時は正確な日時を示しません。

ですので、以下のどちらかで、時間を取得するのが妥当と考えます。

・ご自身のサーバ時間をPHPなどを用いて取得するか、

・日本標準時よりJSONP 形式時刻情報を使用するか
（参考URL）

参考URL：

http://www2.nict.go.jp/w/w114/tsp/PubNtp/clients.html

お礼

ありがとうございます！
PHP・・・やはり勉強すべきですね・・・。
わかりました・・・。

あとこんな方法が正確な時刻を取得する方法にあるとは
ぜんぜんしりませんでした！
ありがとうございます。
たしかに正確な時刻を取得しないと、
パソコンの時間が狂っていたら
だめですよね。
なるほどです。
勉強になりました。
ありがとうございます！！！

回答No.2

fujillin

#1です。

＞全くの初心者でよくわかりません・・。
はい。誰でも最初は初心者です。
初心者から一歩抜け出すために学習しましょう。

◆まずは理屈から…
＞＞○○日まで、あと○○時間○○秒○○！
＞＞というのはウェブで調べられたのですが
とのことなので、その「○○日」を「明日の午前0時」に置き換えることができれば、あとはそのまま利用すれば目的が達成できると思いませんか？

『「○○日」までの時間を計算して表示する』
　　　　↓
『「明日の午前0時」までの時間を計算して表示する』

お調べなさったものは（どのようなものかわかりませんが）、使う人が「○○日」を設定できるようにコメントなどが付けられていると思います。
年月日や時刻の設定をしやすいように。
そして、多分そのすぐ後で、その日付や時刻を用いて変数に日時を代入していると推測します。
　例えば　var target_day = new Date(～～～～～);　みたいにして。

ということはこの部分を入替えてあげれば良いということになりませんか？
その後の処理は、その変数（上の例では target_day：実際は他の変数名）を用いて処理されているはずですので、その日付の内容を#1の日付と入替えてしまえばよさそうに思えませんか？

◆続いて書き方
簡単な方法としては、
　var dt = new Date();
　dt = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()+1);
　var target_day = dt;
とすることでOKですが、（target_dayはあくまでも仮定の変数名です）
　var dt = new Date();
　var target_day = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()+1);
でも同じことになります。

このように入替えてしまえば、前述の年月日や時刻の設定する部分とその結果を用いて、日付を取得する
　var target_day = new Date(～～～～～);　（←あくまでも例です）
の部分までは不要になってしまいますので、削除してもよくなります。
というか、無駄なものは削除しましょう。

＞どういう風にかいたらいいかおしえてくださると～
質問者様がみつけられたコードがどのようなものかまったくわかりませんので、想像力をめいっぱい発揮して、推測で書いてみました。
そのため、実際のコードによってはもう少し違う書き方をした方が良い場合があるかも知れません。
でも、書き方は別としても、考え方としてはほぼ上述の考え方が通用するのではないかと想像します。

お礼

色々おしえていただいて本当にありがとうございます！

補足

失礼しました！すみません、見つけたソースを貼り付けますね！

ありがとうございます！なるほど！
自分でアタマを働かせないとですね！！
すみませんでした、ありがとうございます！

で、上記、で一回りするとカウントがゼロになるのですが、
そのあとはまた翌日のカウントを自動で続けたいのですが
なにか、ループさせるような関数をいれたらいいのか、
それとも全く違う構文になるのか、
わかりません・・
参考にカウントダウンを貼り付けます。
これだと、1ループすると、カウントダウンがとまってしまいますが、
次の日になったらまた自動的にカウントダウンを始められるように
したいのですが、どうしたらいいでしょうか・・・

<script language="JavaScript"><!--
function myCountDown(myYear,myMonth,myDay){
myNow = new Date();
myRunDate = new Date( myYear , myMonth-1 , myDay );
myMsec = myNow.getTime()-myRunDate.getTime();
myDayCount = Math.floor(myMsec / (1000*60*60*24));
return myDayCount; // 指定日も１日と数える場合は１を足します(myDayCount+1)
}
// --></script>

<script language="JavaScript"><!--
myDay = myCountDown(2001,1,1);
if (myDay < 0)document.write("２１世紀まで、あと",myDay*(-1),"日です");
else if (myDay == 0)document.write("本日から２１世紀です！");
else document.write("２１世紀に突入して、",myDay,"日が経過しました");
// --></script>

こちらのサイトさんです。
いつもお世話になっています。
http://www.red.oit-net.jp/tatsuya/java/countdown.htm

これがゼロになると同時に自動的にカウントダウンを始めるように
できないものでしょうか・・・
わがままいってすみません。
もしよろしければ教えていただけるとうれしいです。

回答No.1

fujillin

＞○○日まで、あと○○時間○○秒○○！
＞というのはウェブで調べられたのですが
それがわかっていれば、「○○日」を明日の午前零時に変えればできますよね？

明日の午前0時を取得する方法として

　var dt = new Date();
　dt = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()+1);

でいかがでしょうか？

お礼

早速教えていただきほんとうにありがとうございます！

補足

早速おしえていただいてありがとうございます！

・・すみません、これで日付を取得してどうしたらよいのでしょうか・・。
もしよろしければどういう風にかいたらいいかおしえてくださるととてもありがたいです。
すみません、全くの初心者でよくわかりません・・。