【VUE】倒计时计算

<script>
    new Vue(
        {
            el: '#app',
            data: {
                openTime: '2023-09-06 00:00:00',
                timer:"",    // 定时器对象
                hours:"00",
                minutes:"00",
                seconds:"00"
            },

            mounted() {
                // 每秒计算差值
                this.timer = setInterval(this.countdown, 1000); 
            },
			
            // 清除定时器
            beforeDestroy() {
                clearInterval(this.timer); 
            },

            methods: {
               
                // 倒计时计算 
                countdown() {
                    const targetTime = new Date(this.openTime).getTime();
                    const currentTime = new Date().getTime();
                    const remainingTime = targetTime - currentTime;
                    this.seconds = String(Math.floor((remainingTime / 1000) % 60)).padStart(2, '0');
                    this.minutes = String(Math.floor((remainingTime / 1000 / 60) % 60)).padStart(2, '0');
                    this.hours = String(Math.floor((remainingTime / (1000 * 60 * 60)) % 24)).padStart(2, '0');
                },
            }
        })
</script>

posted @   PythonNew_Mr.Wang  Views(30)  Comments(0Edit  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示