jQueryで毎日指定時間のみ表示するコンテンツを作りたいです

Question

#やりたいこと
毎日指定時間内だけ表示されるコンテンツを作りたいです。
初心者でネットでいろいろ調べて、日時を含む期間で表示にすることはできました。
しかしそれでは毎日ではなく1度非表示になったら終わりなので困っています。

作りたいものとしては、公共施設によくある「○○会議室　19:00～　○○○○祭り運営 会議」のようなディスプレイや駅や空港の次の列車・便の時間表記みたいなのを作りたいです。
毎日時間が決まっているため、永久的に自動で該当時刻のみ表示させたいです。

#前提
わがままで申し訳ありませんが、以下のコードのように、html上のそれぞれで時間を指定できるやり方が、ベストです。
いくつもの時間を大量に指定し更新をするので同じコードをその分大量に用意するのは現実的でなく、更新が不可能だから。

一応参考にしたサイトです。
jQueryで期間限定など日時指定表示で要素を表示・非表示と切り替えたい！

#コード

$(function(){
    setInterval(function(){
        $(document).ready(function() {
            $(".view_timer").each(function(index, target) {
                var startDate = $(this).attr("data-start-date");
                var endDate = $(this).attr("data-end-date");
                var nowDate = new Date();
                if (startDate) {
                    startDate = new Date(startDate);
                } else {
                    startDate = nowDate;
                }
                if (endDate) {
                    endDate = new Date(endDate);
                }
                if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        },4000);
    });
});

<span class="view_timer" data-start-date="2020/2/1 0:00" data-end-date="2020/2/6 16:50">
        <div class="info">
            <p>表示したいコンテンツ</p>
        </div>
</span>

　
data-start-date="2020/2/1 0:00" data-end-date="2020/2/6 16:50"　を
data-start-date="0:00" data-end-date="16:50"　のように出来ませんか？

よろしくお願いします。

#追記

ネットで調べると、時間の取り出し方は書いてあったのですが、それの使い方がいまいちわかりませんでした。
適当に書いてみたのを載せておきます。

エラーはUncaught ReferenceError: nowDatetime is not definedですが、そもそも記述方法間違えていると思いますので...

$(function(){
    setInterval(function(){
        $(document).ready(function() {
            $(".view_timer").each(function(index, target) {
                var hour = nowDatetime.getHours();
                var minute = nowDatetime.getMinutes();
                var second = nowDatetime.getSeconds();
                var startDate = $(this).attr("data-start-date");
                var endDate = $(this).attr("data-end-date");
                var nowDate = ("minute+second");
                if (startDate) {
                    startDate = new Date(startDate);
                } else {
                    startDate = nowDate;
                }
                if (endDate) {
                    endDate = new Date(endDate);
                }
                if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        },4000);
    });
});

Answer 1

new Date()の結果のhoursとminutesだけで比較すれば良いのでは。

Date

Comments

[babirudebiruba]

ご回答ありがとうございます。
時間だけで比較すればよいことはわかり、ネットで沢山調べましたが、いまいちやり方がわかりません。
getHoursやgetMinutesを使えば良さそうで試してみましたが動かなくなりました。

無知で申し訳ないのですが、どのように記述すると、設定した時刻と現在の時刻を比較することが出来るのか教えていただけませんでしょうか。
よろしくお願いします。

[m.ts10806]

試したコードを提示してください。
「動かない」には幾つもの意味が含まれるので正確に現象伝えてください。エラー確認してますか？

[babirudebiruba]

追記しました。説明不足で申し訳ないです。

ネットで調べると、サイトに現在時刻の表示や日付を含んだものばかりがヒットしてしまい、時間だけを取り出す方法が見つかりませんでした。
自分なりに書いてみましたが絶対に違うことはわかっており、エラーでも書き方がおかしいと注意されています。ほぼ始めてjQueryを触ったので、自分でいろいろ試す知識がなく頼ってしまい申し訳ありません。

[m.ts10806]

コードが劣化しています。
基本的に上から順番に流れていくので、定義されてない変数がいきなり使われていれば当然提示の結果になります。
Dateは引数なしだと「現在日時（システム日時）」を取ります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

返されるのはオブジェクトなので、そこから適宜取り出せば良いだけです。
・・・と言うことですが、「オブジェクトって何」というところからきちんとおさえたほうが良いかと思います

[babirudebiruba]

自分でjQueryについて基礎から学習しようと思います。
ご回答ありがとうございました。

[m.ts10806]

jQueryではなくJavaScriptの話かと・・

[babirudebiruba]

あーそうだったんですね。
jQueryだとどうすると解決につながるか教えていただけませんか？

[m.ts10806]

ちょっと質問の意図が分かりません。
あくまでJavaScriptにおけるロジックの問題であって
JavaScriptのライブラリであるjQueryの機能を使うような話ではないです。

now = new Date();
console.log(now.getHours());
で「今何時」がとれる。

s = new Date("2020/2/6 16:50");
console.log(s.getHours());
で「16時」がとれる。

というだけのことではヒントにもなりませんか？

[babirudebiruba]

定義について自分なりに考えて書いてみたらうまくいきました！
ご指摘の定義をしないといけないの意味を間違っているとは思いますが理解が出来ました。

いつもネットからコピペだったので今後は自分で書けるように勉強していきたいと思います。
何度もご回答ありがとうございました。

Answer 2

回答じゃないです。
この実装の方向性だと、クライアントの時間を参照しています。
要件を見ると、サーバの時間を参照すべきです。

楽なのは、サーバで時間を確認してコンテンツを出し分ける事だと思いますが、JavaScript で取得する方法もあるようです。

サーバの時間 JavaScriptでググるといくつか出てきました。

Answer 3

解決したコードを載せておきます。

            $(".view_timer").each(function(index, target) {
                var startDate = $(this).attr("data-start-date");
                var endDate = $(this).attr("data-end-date");
                var now = new Date();
                var hour =  now.getHours();
                var minute = now.getMinutes();
                var time = ('0' + hour).slice(-2) + ":" + ('0' + minute).slice(-2);
                if (startDate <= time && (!endDate || time <= endDate)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });

HTMLで<span class="view_timer" data-start-date="00:00:00" data-end-date="18:29:00">で時刻を設定すればできました。

皆さんありがとうございました。