カウントダウンタイマーを配置したい
浦島です。今回はカウントダウンタイマーを非常に簡単なコードで配置できるjQueryプラグイン「yycoutdown」を紹介していきます。
さっそく初めていきましょう
必要なファイルを用意しましょう
githubから必要なフォルダをダウンロードしてきて解凍しましょう。
今回必要なフォルダは「js」
これをそのままコピーしてきましょう
jsを読み込もう
|
1 2 |
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/jquery.yycountdown.min.js" type="text/javascript"></script> |
head内に書き込んでください
htmlを書き込む
|
1 2 |
<h1>yycountdownデモページ</h1> <div id="timer"></div> |
javascriptを書き込もう
|
1 2 3 4 5 6 7 8 9 10 |
<script> $('#timer').yycountdown({ startDateTime: '2019/10/13 0:0:0',//開始 endDateTime: '2019/10/13 23:59:59',//終了 unit: { d: '日', h: '時間', m: '分', s: '秒' },//単位 complete: function (_this) {//カウントダウン終了時の表示 _this.find('.yycountdown-box').css({ color: 'red' }); } }); </script> |
body内に書き込んでいきましょう
全ソースコードはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/jquery.yycountdown.min.js" type="text/javascript"></script> <title>yycountdown</title> </head> <body> <h1>yycountdownデモページ</h1> <div id="timer"></div> <script> $('#timer').yycountdown({ startDateTime: '2019/10/13 0:0:0',//開始 endDateTime: '2019/10/13 23:59:59',//終了 unit: { d: '日', h: '時間', m: '分', s: '秒' },//単位 complete: function (_this) {//カウントダウン終了時の表示 _this.find('.yycountdown-box').css({ color: 'red' }); } }); </script> </body> </html> |
非常に短いコードで完成します。
以上、jQueryプラグイン カウントダウンタイマーを配置できる『yycoutdown』の紹介でした。
Follow me!
