JS实现timer定时器(以月为单位循环计数)

需求：循环显示1月到12月数值，要求每2.1秒变换一次。

技术栈：vue2

代码： 

<template>
    <div class="test">
        <h1 class="month">{{monthNum}}</h1>
    </div>
</template>
<script>
export default{
    data(){
        return{
            monthNum: 1,
            timer: null
        }
    },
    mounted(){
        this.startTimer();
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    methods:{
        startTimer() {
            this.timer = setInterval(() => {
                this.monthNum++;
                if (this.monthNum > 12) {
                    this.monthNum = 1;
                }
            }, 2100);
        }
    }
}
</script>
<style>
.month {
	color: #000;
	font-size: 18px;
	font-weight: normal;
}
</style>

另一种方法，通过取模运算：

<template>
    <div class="test">
        <h1 class="month">{{monthNum}}</h1>
    </div>
</template>
<script>
export default{
    data(){
        return{
            monthNum: 1,
            timer: null
        }
    },
    mounted(){
        this.startTimer();
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    methods:{
        startTimer() {
            this.timer = setInterval(() => {
                this.monthNum = (this.monthNum % 12) + 1; // 使用取模运算符确保monthNum在1到12之间循环
            }, 2100);
        }
    }
}
</script>
<style>
.month {
	color: #000;
	font-size: 18px;
	font-weight: normal;
}
</style>

初始化为1，显示1；1模12等于1,2模12等于2，...,11模12等于11，12模12等于0，取模后值加上1，显示2至12再至1，循环往复。