jQueryプラグイン「yycoutdown」は、現在日時または指定日時から指定終了日時までのカウントダウンを表示するjQueryプラグインです。
誰でも簡単に使えます。
また、見た目は簡単にCSSで変更できますので、どのようなサイトでも利用しやすくなっています。

サンプル ─ シンプルな使い方

html

<div id="timer"></div>

CSS

.yycountdown-box{
text-align:center;
margin:10px 0;
color:#000000;
}

JavaScript

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

Sample

サンプル ─ 全オプションを利用

html

<div id='timer2'></div>

CSS

.yycountdown-box{
  text-align:center;
  margin:10px 0;
  color:#000000;
}

JavaScript

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

Sample

サンプル ─ 使用例:パリオリンピック開催までのカウントダウンタイマー

html

<div id='olympic'>Paris<span>●</span>2024</div>
<div id='olympicDate'>Paris Olympics is on Friday, 26 July 2024 !!</div>
<div id='timerOlympic'></div>

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

JavaScript

$('#timerOlympic').yycountdown({
endDateTime : '2024/07/26 00:00:00'
});

Sample

Paris 2024
Paris Olympics is on Friday, 26 July 2024 !!