カウントダウンタイマーにて最終日を取得する方法について

Question

現在jQueryにて、カウントダウンタイマーを作成しておりますが、
タイマーに指定した期間の最終日にinnerHTMLテキストを変える方法がわかりません。

トライしてみたコードは以下になります。

<div class="main-timer">
  <p class="main-timer__text">終了まで</p>
  <div class="main-timer__num">
      <div class="timer" id="timer"></div>
  </div>
</div>

document.addEventListener('DOMContentLoaded', function() {
	var Timer = function(saleStartTime, saleEndTime, endMessage, outputDestination) {
		this.saleStartTime = saleStartTime;
		this.saleEndTime = saleEndTime;
		this.endMessage = endMessage;
		this.outputDestination = outputDestination;
	};

	Timer.prototype.countDown = function() {
		var saleStartTime = new Date(this.saleStartTime);
		var saleEndTime = new Date(this.saleEndTime);
		var oneDay = 24 * 60 * 60 * 1000;
		var countDownTimer = document.getElementById(this.outputDestination);
		var endMessage = this.endMessage;
		var currentTimeCD = new Date();
		var untilStartTime = new Date();
		var untilFinishTime = new Date();
		var date = new Date( 2020, 9, 24 ) ;
		var lastDay = date.getDate() ;
		var d = 0;

		setInterval(calculateTime, 1000);

		function calculateTime() {
			currentTimeCD = new Date();
			untilStartTime = saleStartTime - currentTimeCD;
			untilFinishTime = saleEndTime - currentTimeCD;

			if (currentTimeCD < saleStartTime) {
				d = Math.floor(untilStartTime / oneDay);
			} else {
				d = Math.floor(untilFinishTime / oneDay);
			}

			showTime();
		}

		function showTime() {
			if (currentTimeCD < saleStartTime) { // キャンペーン開始前
				countDownTimer.innerHTML
					= '<span class="main-timer__text">キャンペーン開始前</span>';
			} else if (currentTimeCD <= lastDay) {
				countDownTimer.innerHTML
					= '最終日';
			} else if (currentTimeCD >= saleStartTime && currentTimeCD <= saleEndTime) { // キャンペーン期間中
				countDownTimer.innerHTML
					= '<span class="main-timer__text">あと</span>' + d + '<span class="main-timer__text">日</span>';
			}  else if (saleEndTime < currentTimeCD) {
				$('.main-timer').css('display', 'none');
			}
		}
	}

	var myTimer = new Timer('2020/09/24 00:00:00', '2020/09/24 23:59:59', '終了！', 'timer');
	myTimer.countDown();
}, false)

参考にさせていただいたサイトはこちらになります。https://jsfiddle.net/hasa83/zrhmjut4/17/

実装したいこととしましては、
カウントダウンを指定した日付より前の日では、「キャンペーン開始前」テキストを表示し、
キャンペーン期間中は、「あと〇〇日」の〇〇の部分をカウントダウンで表示し、
キャンペーン最終日には、テキストを「最終日」に変更を行い、
終了後は、HTMLタグ自体を削除する、ということを行いたいと思っております。

最終日のテキストを表示させる以外の挙動は問題なく動くのですが、
最終日テキストのみが、HTMLに出力されません。

条件分岐のところで、指定した期間の間で、数日をピックアップして取得する所の書き方が
恐らく間違えているのではないかと思いますが、
正しい記述方法がわかりません。。

ご存知の方お力をお貸しいただけないでしょうか。
どうぞよろしくお願いいたします。

Comments

[m.ts10806]

「うまくいかない」では他者にはなにも伝わらないので、起きている現象をそのまま具体的に記載してください。

[Yui_note]

ご指摘いただきありがとうございます。
只今質問修正させていただきましたが、「うまくいかない」内容の詳細につきましては、最終日というテキストがHTMLに出力されない状況でした。
説明が不足しておりまして大変失礼いたしました。

[kuma_kuma_]

とりあえず
> = '最終日'
ここは
> = '<span class="main-timer__text">最終日</span>';
こうじゃないの？

[Yui_note]

ありがとうございます。
そちらにつきましては、現状のもので問題ないです。m

Answer 1

カウントダウンを指定した日付より前の日では、「キャンペーン開始前」テキストを表示し、
キャンペーン期間中は、「あと〇〇日」の〇〇の部分をカウントダウンで表示し、
キャンペーン最終日には、テキストを「最終日」に変更を行い、
終了後は、HTMLタグ自体を削除する、ということを行いたいと思っております。

時系列には

-(「キャンペーン開始前」)-> saleStartTime -(「あと○日」)-> lastDay -(「最終日」)-> saleEndTime -> (表示しない)

な感じなのかなと思ったのですが、それだとcurrentTimeCD <= lastDayが気になりました。
lastDayは最終日の00:00になるため、この比較だとlastDayをDateオブジェクトに修正しても、
最終日以前の分岐になるような気がします。

それを踏まえると分岐としてはこうなるのかなと思います。

if (currentTimeCD < saleStartTime) { // キャンペーン開始前
    countDownTimer.innerHTML = '<span class="main-timer__text">キャンペーン開始前</span>';
} else if (saleEndTime < currentTimeCD) {  // キャンペーン終了後
    $('.main-timer').css('display', 'none');

//ここから先はキャンペーン期間
} else if (currentTimeCD >= lastDay) { // 最終日（最終日00:00以降からキャンペーン終了直前）
    countDownTimer.innerHTML = '最終日';
} else {
    countDownTimer.innerHTML = '<span class="main-timer__text">あと</span>' + d + '<span class="main-timer__text">日</span>';

補足: Dateオブジェクト

Dateを年月日の引数付きで作る時の第2引数は0起点の月です。 参考

そのため、日付を指定したい場合はnew Date("2020/9/24")としたほうが良いような気がします

Comments

[kuma_kuma_]

Dateの変換は確かにnew Date("2020/9/24")が良いですね

[Yui_note]

>attakeiさま

アドバイスいただきありがとうございます。
まず時系列につきましては、いただいた内容の通りになります。
いただいたコードの考え方がとても参考になります。
試してみました所、キャンペーン中に表示される「あと〇〇日」というところだけが　常に「最終日」
という表示になってしまいます。
その他の以下の3つの動きは実装ができました。
「キャンペーン開始前」のテキスト表示
「最終日」のテキスト表示
キャンペーン終了後にmain-timerを削除

キャンペーン期間中が常に最終日の取得になっている様なので、
こちらの部分を自分の方でももう少し考えてみたいと思います。
後少しのところまできた感じがしています。。
ありがとうございました！m

Answer 2

// こうじゃなくて
//        var date = new Date( 2020, 9, 24 ) ;
//        var lastDay = date.getDate() ;  // これじゃ24ていう値だよ
//　こう
        var lastDay = new Date( 2020, 9, 24 );

あとこうしておいた方がよいのでは？

            $('.main-timer__text').css('display', 'none');
            countDownTimer.innerHTML
                    = '最終日';

ロジック自体の見直しを要望されているそうなので再編集しました。

document.addEventListener('DOMContentLoaded', function() {

	// 必要ない値は設定しない。ここで行うのは受け取ったパラメータを内部で使用しやすい形にしておく事
	// 後データ型は揃える。日時ならDate型
	var Timer = function(saleStartTime, saleEndTime, outputId) {
	    this.saleStartTime = new Date(saleStartTime);    							// 開始日日時
	    this.saleEndTime = new Date(saleEndTime);        							// 終了日日日時
	    this.saleLastTime = new Date(this.saleEndTime - (24 * 60 * 60 * 1000));		// 最終日日時(この時点で値は作成しておく)
	    this.outputDestination = document.getElementById(outputId);					// この時点で参照も済ます。
	};

    function showTime() {
        var now = new Date();		// 現在日時の取得
        var tag = '';				// 追加位置が固定ならそこに対してタグを追加する。
        							// この時はこれを追加たり書き換えたり削除したりしない事
        							// あとでCSSの調整ができなくなる。

		// 判定は時間の順番に行う
        if (now < myTimer.saleStartTime) { 
            // キャンペーン開始前
	        var tag = '<span class="main-timer__text">キャンペーン開始前</span>';
            myTimer.outputDestination.innerHTML = tag;
        } else if (now >= myTimer.saleStartTime && now < myTimer.saleLastTime) { 
            // キャンペーン期間中(最終日前まで)
            var d = Math.floor((myTimer.saleEndTime - now) / (24 * 60 * 60 * 1000));　// 残り日数の計算
            tag += '<p class="main-timer__text">終了まで</p>';
            tag += '<div class="main-timer__num">';
            tag += '    <div class="timer" id="timer">';
            tag += '        <span class="main-timer__text">あと</span>' + d + '<span class="main-timer__text">日</span>';
            tag += '    </div>';
            tag += '</div>';
            myTimer.outputDestination.innerHTML = tag;
        } else if (now >= myTimer.saleLastTime && now < myTimer.saleEndTime) { 
            // キャンペーン期間中最終日 終了！
            tag += '<p class="main-timer__text">終了!</p>';	// 質問する時タグを省略しない。指定classの影響で表示されない事もある。
            myTimer.outputDestination.innerHTML = tag;
        } else if (now >= myTimer.saleEndTime) {
            // キャンペーン期間終了後
        }
    }
    //　こういう時、一般的には'2020/09/25 23:59:59'ではなく'2020/09/26 00:00:00'で作成して判定文を"<="ではなく"<"とする。(23:59:59.1000秒はどうなりますか？)
    myTimer = new Timer('2020/09/21 00:00:00', '2020/09/26 00:00:00', 'main_message');

    setInterval(showTime(), 1000);
}, false)

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">

    <script src="/jquery.min.js"></script>

<!-- Title -->
<title>test</title>

</head>

<body>
<div id="main_message" class="main-timer">
</div>
</html>

Comments

[Yui_note]

ありがとうございます。
1つ目にご指摘いただいたJS修正いたしました。
2つ目のコードについては、HTMLタグを削除するだけの目的でしたので、
innnerHTMLは恐らくいらないと思います。違っていたらすみません、。
入れてみましたが、実装したい動きにはなりませんでした。

[kuma_kuma_]

2つ目のコード入れないと

あと
最終日

って表示になりませんか？
という意味です。
なにか別に処理されているならいりません。

[Yui_note]

あ、、すみません。
main-timer__textの親要素のタグを丸ごと削除してるので、
こちらのタグは削除しないで大丈夫です。

[Yui_note]

あと
最終日

という表示にはなりません。
ありがとうございます。

[kuma_kuma_]

う～ん、ない処理まではこちらで想像できません。
あくまで提供されたソース上でしかお答えできないので．．．
今回はソースにあった判定の誤りだけで済みましたが、
変に略されると「回答できない」「あやまった回答になる」のでご注意を

[Yui_note]

ご指摘いただいたところに関しては、今回特に問題とは関係のない所ですが、
ソースに中に記述してもので問題ないと思います。
コードを略してもいないです。

説明にも記述しておりますが、
指定した期間の間で、数日をピックアップして取得する所の
条件分岐の書き方のところが恐らく問題なのではと思っております。

そちらにつきまして、もし可能でしたら
書き方のご指導いただけますと大変助かります。
よろしくお願いいたします。

[kuma_kuma_]

？lastDayの値の取り方変更して対応できたのではないのですか？

[Yui_note]

実装したい動きになりませんでしたと、初めにいただいたコメントに対してお伝えさせていただきました。m
現状まだ対応できていないです。

[kuma_kuma_]

？？
> 最終日のテキストを表示させる以外の挙動は問題なく動くのですが、
> 最終日テキストのみが、HTMLに出力されません。
こちらでは
lastDay = new Date( 2020, 9, 24 );　// 今日を最終日と設定して
で提示されたソースで処理が最終日判定でtrueになって
あと
最終日
と表示されている事を確認しているのですが？

> 1つ目にご指摘いただいたJS修正いたしました。
こちらで動作確認している状態でこれだけ書かれても
うまくいったとしか判断できないです。

> main-timer__textの親要素のタグを丸ごと削除してるので
提示されているソースコード上この処理ありませんよね？
先にも書きました通り、変に略されていませんか？