カウントダウンタイマー<jQueryプラグイン「yycoutdown」>

楽天のスーパーセールやお買い物マラソン、ヤフーショッピングなどのセールに使えるカウントダウンの付いたページ。

そんなページを使う時に便利なのがjQueryプラグイン「yycoutdown」。

jQueryカウントダウンタイマー【デザイン自由自在版】

ダウンロードはここ

必要なファイル

jquery-1.10.2.min.js ・・・ jquery

jquery.yycountdown.min.js ・・・ yycountdown 本体

jquery.yycountdown.css ・・・ 装飾用CSS

JSの設定

最低の設定は

$('#timer').yycountdown({endDateTime:'2020/07/24 00:00:00'});

 

全オプションを指定するなら

$('#timer2').yycountdown({
  startDateTime : '2020/07/23 23:59:55',  //カウントダウン開始日時
  endDateTime   : '2020/07/24 00:00:00',  //カウントダウン終了日時
  unit          : {d: '日', h: '時間', m: '分', s: '秒'},  //カウントダウン単位
  complete      : function(_this){  //カウントダウン完了時のコールバック
                    _this.find('.yycountdown-box').css({color:'red'});
                  }
});

 

startDateTime : '2020/07/23 23:59:55'//カウントダウン開始日時
開始日時を入れると開始日時からカウントダウン

unit          : {d: '日', h: '時間', m: '分', s: '秒'},  //カウントダウン単位
デフォルトのday、hour、min、secを日本語表記に変えます。

  complete      : function(_this){  //カウントダウン完了時のコールバック
                    _this.find('.yycountdown-box').css({color:'red'});
                  }

終了時の文字色を指定。

CSSの設定

フォントの色やサイズを指定します。

.yycountdown-box{
  text-align:center;
  margin:10px 0;
  color:#000000;
}
 
#timerOlympic .yycountdown-box .yyc-day{
  font-size:3.0em;
  color:#0085C7;
}
#timerOlympic .yycountdown-box .yyc-hou{
  font-size:3.0em;
  color:#F4C300;
}
#timerOlympic .yycountdown-box .yyc-min{
  font-size:3.0em;
  color:#009F3D;
}
#timerOlympic .yycountdown-box .yyc-sec{
  font-size:3.0em;
  color:#DF0024;
}
 
#timerOlympic .yycountdown-box .yyc-day-text,
#timerOlympic .yycountdown-box .yyc-hou-text,
#timerOlympic .yycountdown-box .yyc-min-text,
#timerOlympic .yycountdown-box .yyc-sec-text{
  font-size:1.0em;
}

 

単体で動くBootstrap4「CDN」バージョン

jquery.yycountdown.css、jquery.yycountdown.jsも組み込んでいるのでリンク無し単ページで動きます。

サンプル

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Bootstrap4 タイマー</title>
<style>
.yycountdown-box{
text-align:center;
margin:10px 0;
color:#000000;
}
#timer .yycountdown-box .yyc-day{
font-size:3.0em;
color:#0085C7;
}
#timer .yycountdown-box .yyc-hou{
font-size:3.0em;
color:#F4C300;
}
#timer .yycountdown-box .yyc-min{
font-size:3.0em;
color:#009F3D;
}
#timer .yycountdown-box .yyc-sec{
font-size:3.0em;
color:#DF0024;
}
#timer .yycountdown-box .yyc-day-text,
#timer .yycountdown-box .yyc-hou-text,
#timer .yycountdown-box .yyc-min-text,
#timer .yycountdown-box .yyc-sec-text{
font-size:1.0em;
}
</style>
</head>
<body>
<!-- コンテンツ --> 
<div id="timer"></div>
<!-- /コンテンツ --> 
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- タイマー -->
<script type="text/javascript">
;(function($) {
	$.fn.yycountdown = function(options){
		
		//default setting
		var defaults = {
			startDateTime : new Date(),
			endDateTime   : '2020/07/24 00:00:00',
			diffDateTime  : 0,
			unit          : {d: 'day', h: 'hour', m: 'min', s: 'sec'},
			complete      : null,
			node          : {d: null, h: null, m: null, s: null},
			self          : null,
			timerId       : null
		};
		var setting = $.extend(defaults, options);
		
		//DOM node set
		setting.self = $(this);

		//coutdown init
		var _initTimer = function(){
			//change string to Date object
			if(typeof setting.complete !== 'Date'){
				setting.startDateTimeObj = new Date(setting.startDateTime);
			}
			setting.endDateTimeObj   = new Date(setting.endDateTime);
			setting.diffDateTime     = Math.floor((setting.endDateTimeObj - setting.startDateTimeObj) / 1000);
			
			//view node setting
			var box        = $('<div />').addClass('yycountdown-box');
			var boxDay     = $('<span />').addClass('yyc-day');
			var boxHou     = $('<span />').addClass('yyc-hou');
			var boxMin     = $('<span />').addClass('yyc-min');
			var boxSec     = $('<span />').addClass('yyc-sec');
			var boxDayText = $('<span />').addClass('yyc-day-text');
			var boxHouText = $('<span />').addClass('yyc-hou-text');
			var boxMinText = $('<span />').addClass('yyc-min-text');
			var boxSecText = $('<span />').addClass('yyc-sec-text');
			
			boxDayText.html(setting.unit.d);
			boxHouText.html(setting.unit.h);
			boxMinText.html(setting.unit.m);
			boxSecText.html(setting.unit.s);

			box.append(boxDay).append(boxDayText)
				.append(boxHou).append(boxHouText)
				.append(boxMin).append(boxMinText)
				.append(boxSec).append(boxSecText);
			setting.self.append(box);
			
			setting.node.d = setting.self.find('.yyc-day');
			setting.node.h = setting.self.find('.yyc-hou');
			setting.node.m = setting.self.find('.yyc-min');
			setting.node.s = setting.self.find('.yyc-sec');
		}

		//timer coutdown
		var _countTimer = function(){
			var objDiff = _formatTimer(--setting.diffDateTime);
			_viewTimer(objDiff);
			if(setting.diffDateTime <= 0)  _completeTimer();
		}
		
		//time view
		var _viewTimer = function(objDiff){
			setting.node.d.html(objDiff.d);
			setting.node.h.html(('0' + objDiff.h).slice(-2));
			setting.node.m.html(('0' + objDiff.m).slice(-2));
			setting.node.s.html(('0' + objDiff.s).slice(-2));
		}
		
		//change ms to _day_hour_min_sec
		var _formatTimer = function(diff){
			var oneM = 60;
			var oneH = 60 * 60;
			var oneD = 60 * 60 * 24;
			var diffDay    = Math.floor(diff / oneD);
			var diffHour   = Math.floor((diff - diffDay * oneD) / oneH);
			var diffMinute = Math.floor((diff - diffDay * oneD - diffHour * oneH) / oneM);
			var diffSecond = Math.floor((diff - diffDay * oneD - diffHour * oneH - diffMinute * oneM));
			
			return {
				d: diffDay,
				h: diffHour,
				m: diffMinute,
				s: diffSecond
			};
		}

		//timer complete
		var _completeTimer = function(){
			clearInterval(setting.timerId);
			if(typeof setting.complete === 'function')  setting.complete(setting.self);
		}
		
		//coutdown timer start
		_initTimer();
		setting.timerId = setInterval(_countTimer, 1000);
	};
	
})(jQuery);

</script>
<script type="text/javascript">
	$("#timer").yycountdown({
		startDateTime : '2019/07/10 23:59:55',
		endDateTime   : '2020/07/24 00:00:00',
		unit          : {d: '日', h: '時間', m: '分', s: '秒'},
		complete      : function(_this){
							_this.find('.yycountdown-box').fadeOut();
						}
	});
</script>
</body>
</html>

 

イベント期間中だけ表示したい

参考 ブラウザ側で日時指定で表示・非表示を切り替えるスクリプト

HTMLに記載の場合

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

 

<span class="view_timer" data-start-date="2019/7/18 20:00:00" data-end-date="2019/7/26 01:59:00">
<p align="center">お買い物マラソン終了まで</p>
<div id="timer"></div>
</span>
<span class="view_timer" data-start-date="2019/7/26 01:59:00">お買い物マラソンは終了しました。</span>

data-start-date〜data-end-dateの期間だけ表示。

data-start-dateだけ指定するとdata-start-dateで指定された日時から無期限に表示。

data-end-dateだけ指定するとdata-end-dateで指定された日時以降は表示しない。

コメント

タイトルとURLをコピーしました