カウントダウンタイマー＜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'});

1	$('#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'});
                  }
});

$('#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;
}

.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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

<!doctype html>

<head>

<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>

;(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>

$("#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>

$(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>