コリラボ

技術の学びの備忘録

Vue.js

setIntervalを使ってカウントダウンを作る

setIntervalを使ってカウントダウンを作る

作りたいもの

30秒経過したらアラートが表示されるシンプルなタイマー?(と呼べるかわからないもの)

動くサンプル

動くサンプルはこちら

HTML

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<section id="app">
    <div>
        <div>
            <h2>{{title}}</h2>

            <div>
                <span>{{ time }}</span>
                {{timer}}
            </div>
            <button v-if="!timer" @click="startTimer">
                開始
            </button>

</section>
</body>

ハマったところ

特になし

スクリプト

<script>
    const app = new Vue({
        el: '#app',
        data: {
            title : "カウントダウン",
            time : 30,
            timer :false,
        },
        methods: {
            startTimer: function() {
                this.timer = true;
                setInterval(() => this.countdown(), 1000);
            },
            countdown: function() {
                if(this.time > 0){
                this.time--;
            }
            else{
                    alert("終了");
            }
            }
        },
    })
</script>

ハマったところ

this.time = setInterval(() => this.countdown(), 1000);と書くと数字が変になる。 setInterval関数の戻り値はIntervalIDという数値で、何が入るかは処理系依存です。 これをthis.timeに入れてしまうから変な数値から始まってしまう。

完全版

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<section id="app">
    <div>
        <div>
            <h2>{{title}}</h2>

            <div>
                <span>{{ time }}</span>
                {{timer}}
            </div>
            <button v-if="!timer" @click="startTimer">
                開始
            </button>

</section>
</body>
<script>
    const app = new Vue({
        el: '#app',
        // ========================
        data: {
            title : "カウントダウン",
            time : 30,
            timer :false,
        },
        // ========================
        methods: {
            startTimer: function() {
                this.timer = true;
                setInterval(() => this.countdown(), 1000);
            },
            countdown: function() {
                if(this.time > 0){
                this.time--;
            }
            else{
                    alert("終了");
            }
            }
        },
        // ========================
        computed: {

        }
    })
</script>
</html>