タイムセールなどで使える!カウントダウンタイマー

jQuery

ネットショップでよく行われているタイムセール。
その時に使えるjQueryのカウントダウンタイマーの作り方です。

 

動作サンプル

残り 0時間00

2020/08/12 12:00:00まで

 
jQueryを使用しますので、jQuery本体も読み込んでください。

$(function() {
	$('p.time').css('display','block');
	$('.end_time').css('display','none');
  function time0(v) { v = parseInt(v); return v < 10 ? '0' + v : v; }
  function count_down() {
    var i = 0, S = 1000, M = 60 * S, H = 60 * M;
    $('.timesale p.time').each(function() {
      var d = new Date($('p.end_time span').get(i++).innerHTML) - new Date();
      if (d < 0) d = 0;
      var t = [parseInt(d / H), time0(d % H / M), time0(d % M / S)];
      var j = 0;
      $(this).children('span').each(function() {
        if (j < t.length) $(this).text(t[j++]);
      });
    });
    setTimeout(count_down, S);
  }
  count_down();
});
.timesale{
font-weight:bold;
color:#f00;
}
p.time{
display:none;
}
<div class="timesale">
<p class="time">残り <span>0</span>時間<span>0</span>分<span>0</span>秒</p>
<p class="end_time"><span>2020/08/12 12:00:00</span><span>まで</span></p>
</div>

 

コメント