Discussions

Qカウントダウンタイマー

はじめまして。
これに日にちと文字を追加するにはどうすれば良いですか?

Sample Code

AAnswer to: カウントダウンタイマー

ethertank

ご提示のコードの 17行目 countDown:function(){} が表示のためのメソッドになっています。
(実際にこれ呼び出しているのは 40~41行目の部分ですね。)

var today=new Date();

上記コードで、Dateオブジェクト(現在時刻)を取得しており、tl(目標時刻) は initialize メソッドで既に決定されていますので、残り日数は以下の様にして取得可能です。

var date = Math.floor( (this.tl - today)/24/60/60/1000 );

目標日時と現在時刻の差分をとっています。値はミリ秒で返ってくるため、1000 で割る事によって秒が、更に60で割る事で分が、更に 60 で割る事で時(じ)が、更に 24 で割る事で日数が求められます。表示する残り日数に小数点以下は不要であると仮定し、 Math.floor() メソッドで切り捨てています。
説明のためにこのようなコードにしましたが、 Math.floor( (this.tl - today) / 86400000 ) の方がブラウザさんの計算が少なくなるのでやや動作が軽くなると思います。

その数行先の分岐の中で timer という変数に実際に表示する文字列(および要素)を追加しています。
ここに先ほど取得した date を追加しています。
先頭部分に文字列も追加していますのでお好みで変更してみてください。

--------------------

もしこれが書籍やウェブサイトなどからのコピーでしたら、一度ゼロから書いてみるのも良いと思います。
以下の様な最小のコードからスタートしてみるのがおすすめです。

alert( new Date() );
alert( new Date().getMonth() );

Date インスタンスは getMonth() 以外にも便利なメソッドをいくつか持っています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

Date を覚えて時計やストップウォッチを書けるようになったら、次は canvas でデジタル時計を作って canvas とタイマーを覚え、その次にアナログ時計で角度・座標・アニメーションに触れるというコースがおすすめです。努力が苦手な私でも絵が出ると飽きずに楽しくやれました(その後が難しくて手が出ない感じですが...w)

Post a question

You can post JavaScript, HTML, CSS related questions with attached reference to actual codes and get the answers likewise.

Ask a question

  • 1. Click the ‘Post a question’ above

  • 2. Enter question details, reference code, and click ‘Add question’ button

  • 3. Question will be paired with the code on display

Add an answer

  • 1. Choose a question

  • 2. Enter answer details, attach the reference code and click ‘add answer’ button

  • 3. Your answer will accompanied with attached code

Tag