年末年始の案内をWebで時限表示する

Tweet

年の瀬も迫ってやることといえば年末年始の営業時間の案内だったりしますけれども、Web で案内を出すのはいいのですけれども年始に消し忘れるのを忘れていつまでたっても我が社のホームページに表示されてしまっていて見た目ばかり気にする社内の一部の人に突っつかれてイヤーな思いをしなくても済むように、html と JavaScript で対処しておくといいと思いました。

今回の対象は、Web 担当が逃げてしまって途方に暮れている企業の新米 Web 担当者です。

表示したいページの html の、表示したい場所に、以下のコードを貼り付けてみてください。数字は適宜直してください。

    <div style="margin-bottom: 30px;
                text-align   : center;"
         id   ="newyear">
      <div style="width  : 300px;
                  margin : 0 auto;
                  padding: 4px;
                  border : 2px solid red;
                  text-align:left;">
        <p style="margin : 0px;">
          <strong>年末年始の日程について</strong></p>
        <p>
          弊社窓口は12月28日から1月7日まで
          お休みとなります。</p>
      </div>
    </div>
    
    <script type="text/javascript">
    <!--
      var dToday = new Date();
      var dStart = new Date(2007,0,8,9,0);
        // 営業開始：2007年1月8日9時00分
        // 月は0から数えるので注意
      if (dToday >= dStart) {
        // 今の時刻がday と同じ、またはそれ以降なら
        document.getElementById('newyear').style.display
          = 'none'; // 隠す
      }
    // -->
    </script>

JavaScript 無効のブラウザでは「年末年始の案内」が常に表示されるのが玉にキズ。

ちなみにうちの社はそんなに休みは長くない。

2006.12.20 11:09 投稿　大野 義貴 [Web] | 固定リンク |