質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.40%

  • JavaScript

    18073questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

カウントダウンタイマー

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 818

niimme

score 3

前提・実現したいこと

カウントダウンタイマーのjsを実装しています。
残り時間の日数を『あと○時間△分□秒』という具合にすべて時間で表示させたいのですが記述方法を教えてください。

該当のソースコード

<script language="JavaScript" type="text/javascript">
function CountdownTimer(elm,tl,mes){
this.initialize.apply(this,arguments);
}
CountdownTimer.prototype={
initialize:function(elm,tl,mes) {
this.elem = document.getElementById(elm);
this.tl = tl;
this.mes = mes;
},countDown:function(){
var timer='';
var today=new Date();
var day=Math.floor((this.tl-today)/(24*60*60*1000));
var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
var me=this;
if( ( this.tl - today ) > 0 ){
if (day) timer += '<span class="day">'+day+'日</span>';
if (hour) timer += '<span class="hour">'+hour+'時間</span>';
timer += '<span class="min">'+this.addZero(min)+'分</span><span class="sec">'+this.addZero(sec)+'秒</span><span class="milli">'+this.addZero(milli)+'</span>';
this.elem.innerHTML = timer;
tid = setTimeout( function(){me.countDown();},10 );
}else{
this.elem.innerHTML = this.mes;
return;
}
},addZero:function(num){ return ('0'+num).slice(-2); }
}
function CDT_sat(){
var tl = new Date('2017/08/09 15:00:00');
var timer = new CountdownTimer('CDT_sat',tl,'終了しました');
timer.countDown();
}
CDT_sat();
</script>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

残り日数ではなく、すべて時間で表示することが希望とのことでしたので、なるべくシンプルに記述をしたサンプルを作りました。

また、該当のソースコードは希望の出力形式とは異なっています。ですので、該当のソースコードとして掲載するのには不適切かと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="timer"></div>

  <script type="text/javascript">
    'use strict';

    var timer = document.getElementById('timer');

    // 終了日時を指定
    var endDate = new Date('2017-08-20T10:10:00+09:00');

    var countDown = function() {
      var nowDate = new Date();

      // 現在から終了日時を引いた残り時間を ms で取得
      var ms = endDate - nowDate;

      // ms を時間に戻す
      var h = String(Math.floor(ms / 3600000));
      var m = String(Math.floor((ms - h * 3600000) / 60000));
      var s = String(Math.round((ms - h * 3600000 - m * 60000) / 1000));

      if (nowDate < endDate) {
        timer.innerHTML = 'あと' + h + '時間' + m + '分' + s + '秒';
        setTimeout(countDown, 1000);
      } else {
        timer.innerHTML = '終了しました';
      }
    }

    countDown();
  </script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/05 23:31

    丁寧なご対応ありがとうございました!
    出来ればミリ秒まで表示したいのですが、その場合の追加コードをお教えいただければありがたいです。
    よろしくお願いいたします。

    キャンセル

  • 2017/08/06 00:51 編集

    var s = String(Math.round((ms - h * 3600000 - m * 60000) / 1000)); の部分で、時間hと分mを差し引いたミリ秒を1000で割ることで1秒単位の数値を算出しています。ということは、すでに表示したいミリ秒の数値は出ているようなものなので、そのあとの処理にミリ秒のままの数値を出力するようにしてあげればミリ秒を表示できます。
    それと、setTimeout(countDown, 1000);の部分も変更が必要です。1000ミリ秒(1秒)に1回実行するという意味なので、10にすると10ミリ秒に1回実行するということになります。
    この2つのコードを追加・変更するとミリ秒を表示できるかと思います。

    キャンセル

  • 2017/08/09 00:29

    親切にご享受頂きましてありがとうございました!
    無事解決することができました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.40%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    18073questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。