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

You are here: ...
Home / jQueryカウントダウンタイマー【デザイン自由自在版】

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

jquery-yycountdown ダウンロードページ

ライセンス

GPL/MIT

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

html

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

CSS

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

JavaScript

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

Sample

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

html


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

CSS

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

JavaScript

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

Sample

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

html


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

<div id='olympicDate'>TOKYO Olympics is on Friday, 24 July 2020 !!</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   : '2020/07/24 00:00:00'
});

Sample

TOKYO●2020
TOKYO Olympics is on Friday, 24 July 2020 !!