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

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

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

ダウンロードはここ

必要なファイル

jquery-1.10.2.min.js ・・・ jquery

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

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

JSの設定

最低の設定は

 

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

 

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の設定

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

 

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

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

サンプル

 

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

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

HTMLに記載の場合

 

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

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

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

スポンサーリンク