はてなブログでjQueryを学ぼう６ 日付の期間を計算してみた

はてなブログ内でjQuery実験中。 

Xデーまでのカウントダウンカウンターを作ろう

例えば、開幕するイベントまでのカウントダウン表示
「開幕まで、あとXX日です」を作ります。
やる事は、Xデーから、今の日にちを引いて日数を計算するだけ。

javaScrictで計算するのは、簡単な関数が無くて、ちょっと面倒ですね。
色々方法があるようですが、解りやすい方法で実現します。

----------------------------------------------------------------------------

Xデーを日付型変数に代入
var vxdt = new Date($('#xdt').val());

計算対象の指定日を日付型変数に代入
var vsdt = new Date($('#sdt').val());

各日にちを通算秒に変換してX-Sで計算
var vsec = vxdt.getTime()-vsdt.getTime();

通算秒はミリ秒で記録されているので、ミリ秒*秒*分*時で割って日にちにを計算します
var vday = Math.floor(vsec/(1000*60*60*24));

面倒ですね。

以下テスト

イベント開始日（Xデー）

計算する指定日（ページを開いた日）

 

このボタンをクリック

 結果発表

クリックしないと何も起きないよ

+++++++ ここに結果を表示 +++++++++

今日はここまで。

あっソース貼っておきます。

<h4>以下テスト</h4>
<div>イベント開始日（Xデー）</div>
<div><input id=\"xdt\" maxlength=\"255\" name=\"xdt\" size=\"10\" type=\"text\" value=\"2015/10/09\" /></div>
<div>計算する指定日（ページを開いた日）</div>
<div><input id=\"sdt\" maxlength=\"255\" name=\"sdt\" size=\"10\" type=\"text\" value=\"2015/09/08\" /></div>
<div> </div>
<div><button id=\"button1\" type=\"button\">このボタンをクリック</button></div>
<h5> 結果発表</h5>
<p id=\"text1\">クリックしないと何も起きないよ</p>
<p id=\"text2\">+++++++ ここに結果を表示 +++++++++</p>
<p> </p>
<p>今日はここまで。</p>
<p> </p>

<!-- script -->
<p>
<script type=\"text/javascript\">// <![CDATA[
(function($) {
    
$(function() {
    $(\'#button1\')
      .on(\'click\', function(){
        var vxdt = new Date($(\'#xdt\').val());
        var vsdt = new Date($(\'#sdt\').val());
        var vsec = vxdt.getTime()-vsdt.getTime();
        var vday = Math.floor( vsec / (1000*60*60*24) );
     
        if($(\'#button1\').text()==\"元に戻す\"){
              $(\'#text1\').text(\'クリックしないと何も起きないよ\');
              $(\'#text1\').css({\"color\":\"black\"});
              $(\'#button1\').text(\'このボタンをクリック\');
              $(\'#text2\').text(\'----------------------------------\');
        }else{
              $(\'#text1\').text(\'計算しました\');
              $(\'#text1\').css({\"color\":\"red\"});
              $(\'#text2\').text(vday);
              $(\'#button1\').text(\'元に戻す\');
        }
    });
});
})(jQuery);
// ]]></script>
</p>