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

今回のあれ

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

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

↓こういう動くやつを追加できます。

必要なもの

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

サンプルコード

上から
インポートするところ
divのところ
スクリプトのところ
です。
{{timeleft_minutes}}を適当に100とかしてbodyに全部突っ込めば動くと思います。

<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です

See the Pen Untitled by Naz (@nazunamix) on CodePen.

カラーテーマ例

flat-colors-wide

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

white-wide

divの背景色を指定して白抜きにします。

<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

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

カラーリングをさらに自由に変更したい場合

jquery.classycountdown.js内
case文を追加なり編集すればよし。

                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を入れ替えるとよいかも。