プロが教える店舗＆オフィスのセキュリティ対策術

カウントダウンについての応用について

解決済

  • 質問者：php1234
  • 質問日時：
  • 回答数：7件

先日、JavaScriptで「イブの夜６時までの時間数」を例に挙げて、ご回答頂いたのですが、更に質問がございます。
それは例えば「2007年2月9日18時」になったらカウントダウン表示(2007年12月24日18時であと○時間)させるなんて事は可能でしょうか？
やはりPHPとかも併用しないと無理でしょうか？よろしくお願い致します。

通報する

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

質問の本文を隠す

A 回答 (7件)

No.7ベストアンサー

  • 回答者： hkd9001
  • 回答日時：

php1234 さん、レスありがとうございます。

お疲れ様です～

さて、順番に見てゆきましょうね：

「 D = Math.floor(X/24); //日数 」→　バッチリ、大正解です～！

「 H = Math.floor(X%24); //時間数 」→　これもピンポ～ン！です。

そう、php1234 さんも書いてくださっているように、D、H 両方とも整数にしてあげないといけないですね。そのあたりの気配り、たいへん良いと思います。

あと、「 +D+"日"と+H+"時間" 」→　う～ん、惜しいっ！

ここは「 +D+"日と"+H+"時間" 」とすれば、うまく表示できますね。文字列は必ず ""（引用符）の中に入れて表現する、と覚えていただくと宜しいかと思います。

…といったところでしょうか。もしご不明の点や追加のご質問があれば、お気軽にどうぞ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

hkd9001様、この度は色々とお付き合い頂き本当にありがとうございました。おかげさまで、私のやりたい事ができそうです。余談になりますが、hkd9001様のご回答にはとても暖かさと思いやりが感じられ、お人柄をご察し致しました。これからも何かございましたらアドバイスをいただけら幸いでございます。それでは失礼致します。

通報する
お礼日時：2007/02/12 00:53

No.6

  • 回答者： hkd9001
  • 回答日時：

ごめんなさい。

すぐ上の私のレス、１ケ所おおきな誤りがありました！

【誤】　数値 x の小数部分は「 Math.floor( x ) 」で…

【正】　数値 x の整数部分は「 Math.floor( x ) 」で…

おわび＆訂正いたします。

この回答への補足

hkd9001様、いつもお世話おかけ致しております。以下の通りにやってみました。
まず、結果の数値(時間数)を X とします。
D = Math.floor(X/24); //日数
H = Math.floor(X%24); //時間数
+D+"日"と+H+"時間"//書き方が間違っていますか？

ここで X の値が整数であれば良いのですが、小数点以下もあるので、そうすると　D とH の値両方をMath.floor( ) 関数で整数にしあげないとだめですよね？
以上、吟味の程よろしくお願い致します。

補足日時：2007/02/11 21:23
通報する
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： hkd9001
  • 回答日時：

php1234 さん、レスありがとうございました。


なるほどなるほど、おやりになりたい事がだんだん広がってきましたね。良い事であります。

では今回は、ヒントだけ差し上げますので、何とか頑張って完成させてみてください。もしうまく行かなかったら、また質問してみてくださいね：

＜ヒント＞
…たとえば「70時間」は、「２日と22時間」　ですよね。
ここで、

「何　日」は、「70 を 24 で割った答え」の整数部分（ここでは 2 ）、
「何時間」は、「70 を 24 で割った余り」（ここでは 22 ）

と考えられます。ところで

数値 x の小数部分は「 Math.floor( x ) 」で、
整数 a を 整数 b で割った余りは「 a % b 」で求めることができます。

… php1234 さんなら、たぶん大丈夫だ。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： hkd9001
  • 回答日時：

php1234 さん、ご回答＆レスありがとうございました！



…ご明察です、php1234さん！　その通りでございます（拍手々々々々……！）

あと、目標時刻を過ぎたら再び非表示とするには
（非常に良いご質問だと思います）

「 if(aaa >= ccc && aaa <= bbb) 」

でよろしいと思います。
「現在日時が表示開始日時より後であり、かつ目標日時より前」なら表示をしなさい…という意味になりますよね。

この回答への補足

hkd9001様、早速のご回答、ありがとうございます。正解という事でとてもうれしい気持ちでいっぱいです。
あと、ちょっとまた新たな問題が出てきてしまいまして、
(bbb.getTime() - aaa.getTime())/(60*60*1000)　のところは時間表示ですよね。これを「○日と△時間」に変換したいのですが、いざ色々調べてみたのですが、案外難しくて手間取っております。ちょっと甘く見ておりました。質問の連続でご迷惑かと存じますが、今一度お付き合い願えれば幸いでございます。よろしくお願い致します。

補足日時：2007/02/11 16:26
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： leap_day
  • 回答日時：

『カウントダウン表示』というところが気になったので書いておきますね（＾＾）



<body OnLoad="count()">

<SCRIPT language="JavaScript">
<!--
today = new Date()
next = new Date(2007,11,24,18)
on = new Date(2007,1,14,16)

function count() {
time = Math.floor(((next-today))/(60*60*1000))
if(today - on > 0) {
document.f.days.value = "2007年12月24日18時まであと" + time + "時間"
}
tid = setTimeout('count()', 1000)
}
// -->
</SCRIPT>

<form name=f>
<input type=text size=40 name=days>
</form>

これだとリアルタイム表示できますが1時間同じページを開いている方はいないと思うのでやっぱりdocument.writeかな～～？
if(time > 0) { }で目標時間を過ぎたら非表示になるようにしてます

<SCRIPT language="JavaScript">
<!--
today = new Date()
next = new Date(2007,11,24,18)
on = new Date(2007,1,14,16)

time = Math.floor(((next-today))/(60*60*1000))
if(time > 0) {
if(today - on > 0) {
document.write("2007年12月24日18時まであと" + time + "時間");
}
}
// -->
</SCRIPT>

あとちょっと気になってるのですが『あと～時間』の『～』の部分ですが・・・
例えば1時が目標時間で現在0時30分としたらこの『～』の部分は『0』になります
この表記でいいのでしょうか？『1』にするなら
time = Math.floor(((next-today))/(60*60*1000)+1)
にしてください　ｍ（－－）ｍ

もうひとつ『あと162時間』のような表示(あと6日と18時間のこと)でいいのですよね？
day = Math.floor((next-today)/(24*60*60*1000))
time = Math.floor(((next-today)%(24*60*60*1000))/(60*60*1000))
if(time > 0) {
if(today - on > 0) {
if(day > 0){
document.write("2007年12月24日18時まであと" + day + "日と" + time + "時間");
}else{
document.write("2007年12月24日18時まであと" + time + "時間");
}
}
}

最後に設定日を変えるときは

next = new Date(2007,11,24,18)　　＜＝(『年』,『月－1』,『日』,『時間』)です
on = new Date(2007,1,14,16)
document.write("2007年12月24日18時まであと" + time + "時間");

の3行の数値を変えてください　
(上２行の『月の表示』は『月－１』ですので注意です）
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： hkd9001
  • 回答日時：

早速にレスありがとうございます。



…なるほど、なるほど。つまり、こういう感じですね：

(1) 目標日時は、任意に設定できる。
(2) カウントダウンの表示をはじめる日時も、これまた任意に設定できる。

この例では、

(1)は「2007/12/24/18:00」
(2)は「2007/ 2/14/16:00」（おっ、バレンタインデーじゃぁ あ～りませんか［笑］）

ですので、スクリプトは以下のように…なるんですが、ここでひとつ　おねがい［笑］。
if 文の条件式、すなわち（----）内に入る条件を正しく設定し、スクリプトを完成してください。
＜ヒント＞
現在時刻 aaa と、表示開始時刻 ccc とが　どういう関係（大小関係）になったときに表示（document.write～）を行えばいいでしょう？


<SCRIPT language="JavaScript">
<!--
yy = 2007;
mm = 12;
dd = 24;
hh = 18;

yy_on = 2007;
mm_on = 2;
dd_on = 14;
hh_on = 16;

aaa = new Date();
bbb = new Date(yy,mm-1,dd,hh);
ccc = new Date(yy_on,mm_on-1,dd_on,hh_on);

if(-------) {
document.write((bbb.getTime() - aaa.getTime())/(60*60*1000));
}
//-->
</SCRIPT>

この回答への補足

hkd9001様、即時のご対応を頂ながら返事が遅くなりまして大変申し訳ございませんでした。
>if 文の条件式、すなわち（----）内に入る条件を正しく設定し、スクリプトを完成してください。

<if(aaa >= ccc) でしょうか？
現在時刻aaaが表示開始時刻cccを過ぎていないといけないと思うので。

ここで、目標日時に達した時にも、カウントダウン表示を終了させたい時はどうすればよいのでしょうか？
何から何まで申し訳ございませんがよろしくお願い致します。

補足日時：2007/02/11 10:51
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： hkd9001
  • 回答日時：

こんばんは。



さて引き続きご質問くださり　ありがとうございます。

…で、おたずねしたいのですが、

(1) 目標の日時（ここでは 2007/12/24/18:00）の「時刻」部分と、現在時刻とが一致したとき（タイミングとしては１日１回ということですよね）に表示が出る

(2) もし、上記の時刻にパソコンが立ち上がっていなかったら、その日は表示しない

というイメージでよいのでしょうか。もし質問者さんのやりたいことと異なっていたら、追加・訂正をいただければ幸いです。

この回答への補足

hkd9001様、お返事ありがとうございます。ちょっと私の説明があいまいで申し訳ございません。例を挙げてもう一度ご説明させて頂きます。
例えば現在の時刻が「2007年2月9日22時」だとします。しかしまだこの時点では以下の部分を表示させず、「2007年2月14日16時」になったら以下の部分を表示させる。つまり「2007年2月9日22時」から「2007年2月14日15時」まではコメント(/*)された状態で「2007年2月14日16時」になったらコメントアウトされた状態になり、目標の日時（ここでは 2007/12/24/18:00）までカウントダウンさせる。という意味です。
「2007年2月9日22時」～「2007年2月14日15時」非表示
「2007年2月14日16時」～「2007年12月24日18時」あと○時間（カウントダウン表示）

/*
<SCRIPT language="JavaScript">
<!--
yy = 2007;
mm = 12;
dd = 24;
hh = 18;
aaa = new Date();
bbb = new Date(yy,mm-1,dd,hh)
document.write((bbb.getTime() - aaa.getTime())/(60*60*1000));
//-->
</SCRIPT>
*/

ややこしくてすみませんが何卒よろしくお願い致します。

補足日時：2007/02/09 21:43
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報