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

原创已于 2024-05-21 15:41:00 修改 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2024-04-15 16:49:25 首次发布

文章介绍了如何使用Vue2框架实现一个每2.1秒循环显示1月至12月数值的组件，提供了两种方法：一是直接累加并处理边界条件，二是利用取模运算保持数值在1-12范围内循环。

需求：循环显示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，循环往复。