オシャレなタイマーを実装しよう  jQuery Classy Countdown Plugin

# 今回のあれ

カウントダウンするタイマーを実装します。

https://github.com/arsensokolov/jquery.classycountdown

MIT licenseのようです。色々探したけどこれが一番オシャレな気がしました。ナイス。

↓こういう動くやつを追加できます。
![aaaキャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2385830/8fe0fe92-fad8-fb26-ba7d-2ef8d22fc1d9.jpeg)

# 必要なもの
・jquery
・jquery.knob.min.js
・jquery.ba-throttle-debounce.js（これはなくても一応動く）
・jquery.classycountdown.js
・jquery.classycountdown.css

# サンプルコード

上から
インポートするところ
divのところ
スクリプトのところ
です。
{{timeleft_minutes}}を適当に100とかしてbodyに全部突っ込めば動くと思います。
```HTML
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-knob@1.2.11/dist/jquery.knob.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-throttle-debounce@1.0.0/jquery.ba-throttle-debounce.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.classycountdown@1.0.1/js/jquery.classycountdown.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery.classycountdown@1.0.1/css/jquery.classycountdown.css" rel="stylesheet">

<div id = "countdown">
</div>

<script>
jQuery('#countdown').ClassyCountdown({
    theme: "flat-colors-wide", // theme
    end: jQuery.now() + {{timeleft_minutes}} * 60 // end time
});
</script>
```

Codepenです
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWVOMzM" data-user="nazunamix" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/nazunamix/pen/MWVOMzM">
  Untitled</a> by Naz (<a href="https://codepen.io/nazunamix">@nazunamix</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# カラーテーマ例
### flat-colors-wide
![1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2385830/5deeee86-a1de-782a-dfcf-677453fb6c06.jpeg)

```HTML
<div id = "countdown1">
</div>
<script>
jQuery('#countdown1').ClassyCountdown({
    theme: "flat-colors-wide", // theme
    end: jQuery.now() + 100 * 60 // end time
});
</script>
```

### white-wide
![2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2385830/1141a39a-8d42-b35b-8f85-2df6893594ca.jpeg)

divの背景色を指定して白抜きにします。
```HTML
<div id = "countdown2" style="background-color:#AAAAAA;">
</div>
<script>
jQuery('#countdown2').ClassyCountdown({
    theme: "white-wide", // theme
    end: jQuery.now() + 100 * 60 // end time
});
</script>
```

### black-wide
![3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2385830/76691d8d-b9b1-bee0-cbab-451955a8a428.jpeg)

```HTML
<div id = "countdown3">
</div>
<script>
jQuery('#countdown3').ClassyCountdown({
    theme: "black-wide", // theme
    end: jQuery.now() + 100 * 60 // end time
});
</script>
```

# カラーリングをさらに自由に変更したい場合
jquery.classycountdown.js内
case文を追加なり編集すればよし。
```javascript
                case 'flat-colors-wide'://★好きなcaseの名前にする。これをtheme:で指定する
                    return {
                        labels: true,
                        style: {
                            element: '',
                            textResponsive: 0.5,
                            days: {
                                gauge: {
                                    thickness: 0.03,
                                    bgColor: "rgba(0,0,0,0.05)",//★好きな色にする
                                    fgColor: "#1abc9c"//★好きな色にする
                                },
                                textCSS: 'font-family:\'Open Sans\';font-weight:300;color:#34495e;'
                            },
                            hours: {
                                gauge: {
                                    thickness: 0.03,
                                    bgColor: "rgba(0,0,0,0.05)",//★好きな色にする
                                    fgColor: "#2980b9"//★好きな色にする
                                },
                                textCSS: 'font-family:\'Open Sans\';font-weight:300;color:#34495e;'
                            },
                            minutes: {
                                gauge: {
                                    thickness: 0.03,
                                    bgColor: "rgba(0,0,0,0.05)",//★好きな色にする
                                    fgColor: "#8e44ad"//★好きな色にする
                                },
                                textCSS: 'font-family:\'Open Sans\';font-weight:300;color:#34495e;'
                            },
                            seconds: {
                                gauge: {
                                    thickness: 0.03,
                                    bgColor: "rgba(0,0,0,0.05)",//★好きな色にする
                                    fgColor: "#f39c12"//★好きな色にする
                                },
                                textCSS: 'font-family:\'Open Sans\';font-weight:300;color:#34495e;'
                            }
                        }
                    };
```
カウントダウンっぽさを出すためにbgColorとfgColorを入れ替えるとよいかも。