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

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

GPL/MIT

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

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

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

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

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

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

<div id='olympic'>TOKYO<span>●</span>2020</div>

<div id='olympicDate'>TOKYO Olympics is on Friday, 24 July 2020 !!</div>

<div id='timerOlympic'></div>

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

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