はてなブログでjQueryを学ぼう6 日付の期間を計算してみた
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>