<div id="app">
<div class="timer"> イベントまであと {{ countDown }}
</div>
</div>
<script src="//cdn.jsdelivr.net/npm/vue"></script>
<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>
.timer{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.