サイト上で毎年繰り返し同じ月に同じ言葉を表示させる

Question

サイトを完全に放置した状態で、あらかじめリスト化しておいた(毎年必ず特定月にある)イベント名をサイト上に表示したいと思っています。

2月中は「バレンタインデーがありますね」と常に表示され
3月になったら「ひな祭りがありますね」に切り替わる

そんなイメージです。

これを実現させられそうなコードとして、以下のサンプルを発見いたしました。

$(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();
    }
  });
});

ただ、このコードを使った場合、

<span class="view_timer" data-start-date="2019/2/1 00:00" data-end-date="2019/2/28 23:59">hoge</span>
<span class="view_timer" data-start-date="2019/3/1 00:00" data-end-date="2019/3/31 23:59">fuga</span>

といった感じで、西暦をつけて期限を設定しないとうまく動作しません。
そのため、少なくとも年一回は西暦だけ書き換えなければならず、完全放置というわけにはいかなくなってしまいます。

上記のコードをベースに、「月日(時秒)」のみでメッセージの掲載期間を設定することは可能でしょうか？

もし方法がある場合は、ご教示いただけると幸いです。

Answer 1

ITエンジニアはどれだけ簡素にしょぼく書けるかに頭を使う職業です。

例えば月で表示されている内容が変わるというなら、日時は一切不要ですね。
そして、あなたは同じページを1ヶ月以上も開きっぱなしにする事を想定していますか？
まぁ、普通しませんよね、だったらページが表示された直後に1回行うだけで十分です。

<style>
.information .month {
  display: none;
}
</style>

<div class="information">
  <span class="month month-2">バレンタインデーがありますね</span>
  <span class="month month-3">ひな祭りがありますね</span>
</div>

HTMLをこんな感じに作っておいて…
こんな感じのシンプルな作りで良いんじゃないですか？

$(function(){
  var month = (new Date()).getMonth() + 1;
  $('.month-' + month).show();
});

Comments

[退会済みユーザー]

回答いただき、ありがとうございました。
簡素にしょぼく、という言葉、誠に腑に落ちました。

kunai様からいただいた言葉とともに学んでいきます。

[miyabi-sun]

頑張った跡が質問文から読み取れましたので大丈夫です。
また、頑張りの方向の問題で、嵌りそうな方向へ突き進んでいるように見えたので、
このタイミングでの質問はかなり良かったんじゃないかな？と思います。

今回の低評価の原因は他の人へのアプローチの仕方の問題かなぁと思います。
読み手に優しい優れた質問文を作る事はとても大変です。
ITエンジニアは日本語の文章で上司やお客様に伝えるという任務もありますので、
練習がてら頑張ってみてくださいね。

Answer 2

丸投げの質問は低評価の嵐となり、まともな回答は来ませんよ。
最低限、そのコードが何をしているかを勉強し、理解し、自分で書いてみて下さい。
その上で期待通りに動作しなければ、改めてそのコードと共にご質問下さい。

JavaScriptのDateオブジェクトについて学べばすぐに書けるはずです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

Comments

[退会済みユーザー]

大変申し訳ありません。
すべてにおいて無知な状態で、すぐにでも解決したいがため安易な投稿をしてしまいました。

人様の時間を安易に使おうとせず、あらためて自分自身で問題に取り込みたいと思います。

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