Cntlog > スキルアップ・ノウハウ > JavaScript・jQuery > Vue.jsとmoment.jsでカウントダウンタイマーを作る(サンプルコード有り)

Vue.jsとmoment.jsでカウントダウンタイマーを作る(サンプルコード有り)

カウントダウン系のライブラリは結構ありますが、Vue.jsとmoment.jsを使うだけで簡単にカウントダウンの数字を生成できるのでご紹介します。

vue.jsとmoment.jsを使う理由

vue.jsは簡単にデータの受け渡しができるので、リアルタイムにデータの反映ができるようになります。
また、moment.jsDate()を直感的にというか便利に加工できるので使います。

カウントダウンのためのコード

vue.jsとmoment.jsのライブラリを読み込みます。
読み込み方はnpmでもcdnでもなんでも良いですが、今回はcdnで読み込みます。

// vue.js
<script src="//cdn.jsdelivr.net/npm/vue"></script>

//moment.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/locale/ja.js"></script>

vue.jsでデータバインディングさせるサンプルコード

     const vm = new Vue({
        el: '#app',
        data: {
            countDown:''
        },
    })
    setInterval(function () {//一秒間に一回再取得
        // diffメソッドを使って、日時の差を、ミリ秒で取得
        const diff = moment( '2021-01-01' ).diff( moment() );

        // ミリ秒からdurationオブジェクトを生成
        const duration = moment.duration( diff );

        // 日・時・分・秒を取得
        const days = Math.floor( duration.asDays());
        const hours   = duration.hours();
        const minutes = duration.minutes();
        const seconds = duration.seconds();

        //カウントダウンの結果を変数に代入
        vm.countDown = days + '日' +  hours + '時' + minutes + '分' + seconds + '秒';
    }, 1000);

実際に動いてるサンプル

関連記事

簡単にスクロールアニメーションが設定できるAOS(jQuery不要)... 最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。 一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。 今回はJSをほぼ書かずに簡単にスクロール...
jQuery不要のスクロール時の起動で使えそうなJSライブラリ... 最近Vue.jsを使う機会が増えたのもあってjQuery依存しないライブラリを探していました。 いろいろ調べてみると、delighters.jsが良さそうでした。 実際に使ってみた感想・使い方は後日かければなーと思います。 他にも気になってたライブラリ CSSで記載す...
【JavaScript】PCサイトかスマートフォンサイトを選択させるスクリプト... PC向けサイトにアクセスした際にスマートフォン向けサイトを表示するか選択してもらうスクリプトを書きました。 今回はJavaScriptで作っています。 //iPhone、iPad、AndroidのURLをリダイレクト(選択)させる $(function(){ ...
Nuxt.jsでSCSSの変数をvueファイルでも使えるようにする... Nuxt.jsを使ってみるとSCSSで設定した変数やMixinがVueファイルで使えなかったのでVueファイルでも使える用に設定する方法を紹介します。 インストール まずはnpmで下記をインストールします。 npm add --dev node-sass sass-loader ...
初めてjQueryプラグインを作ってみた(RSS取得)... 最近社内でJSを書く機会が増えてきたので、他の人にも扱いやすいようにと思ってjQueryプラグインにする事を思いつきました。 作ったプラグインの内容はRSSを取得・表示させるためのjqueryプラグインです。 「WordPressならそんなのデフォルトで入ってるやん…」って思ったくら...
Vue.jsの入門レベルを学ぶためにやったこと... ここ3ヶ月くらい気になっていたVue.jsを使うようになりました。 私はJSがそれほど得意ではないのですが、Veu.jsは日本語の情報も多くて、調べると結構情報が出てきます。 とはいえ、初めて使うあるあるだと思うのですが、何から手を付けていいかわからない問題に出くわすと思います。 手探...