人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページ上で指定した日の指定した時間までのカウントダウンを表示させる方法を教えてください。

X月X日のX時X分X秒まであと○時間X秒、と表示が出て(○日○時間○秒ではなく、○時間○秒です)、秒数がリアルタイムに変化するものが必要です。

javascriptのページをいろいろ見たのですが、思ったものが見つからないし、急いでいて勉強する時間がないので、コピーして張り付けたらすぐに使えるものが必要です。

よろしくお願いします。

●質問者: takllin
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript カウントダウン コピー ホームページ リアルタイム
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Mook
●100ポイント

こんな感じでしょうか。

<html>

<head>

<script type="text/javascript">

<!--

// 月は0(1月)?11(12月)

var goalDate = new Date( 2006, 12 - 1, 24, 10, 20, 30 );

function targetTime() {

  var nt = new Date();

  var df = goalDate.getTime() - nt.getTime();

  document.tform.tname.value =

    goalDate.getFullYear() + "年"

    + ( goalDate.getMonth() + 1 ) + "月"

    + goalDate.getDate() + "日の"

    + goalDate.getHours() + "時"

    + goalDate.getMinutes() + "分"

    + goalDate.getSeconds() + "秒まであと"

    + Math.floor( df / 3600000 ) + "時間"

    + Math.floor( df / 1000 ) % 3600 + "秒";

  window.setTimeout( "targetTime()", 1000 );

}

-->

</script>

</head>

<body onload="targetTime()">

  <form name="tform">

    <input type="text" name="tname" size=64>

  </form>

</body>

</html>

◎質問者からの返答

ありがとうございます。

すみません。

「あと、○時間○分○秒」と表示させるにはどうしたらいいのでしょうか?

あと、秒数が1200秒のように表示されてしまうのですが60秒単位で繰り上げることは出来ませんでしょうか?


2 ● daiyokozuna
●100ポイント

http://www.hajimeteno.ne.jp/dhtml/dist/js09.html

◎質問者からの返答

ありがとうございます。

うーん、分からないです。

とりあえず今の問題が片付いたら、時間をとってしっかり勉強したいと思います。


3 ● Mook
●100ポイント ベストアンサー

>X月X日のX時X分X秒まであと○時間X秒

とあったので仕様どおりに作ったのですが、期待の表示ではなかったようですね。

script 内の関数部分を下記に置き換えてください。

function targetTime() {

var nt = new Date();

var df = ( goalDate.getTime() - nt.getTime() ) / 1000;

document.tform.tname.value =

goalDate.getFullYear() + "年"

+ ( goalDate.getMonth() + 1 ) + "月"

+ goalDate.getDate() + "日の"

+ goalDate.getHours() + "時"

+ goalDate.getMinutes() + "分"

+ goalDate.getSeconds() + "秒まであと"

+ Math.floor( df / 3600 ) + "時間"

+ Math.floor( df / 60 ) % 60 + "分"

+ Math.floor( df % 60 ) + "秒";

window.setTimeout( "targetTime()", 1000 );

}

◎質問者からの返答

本当にありがとうございました!

解決しました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ