vue3写一个定时器

vue3没有this,取而代之的是proxy

所以在定时器的写法上也有所不同

话不多说直接上代码

<template>

<p>剩余时间:{{ count }}</p>

</template>

export default{

const seconds = ref(1800);//定义一下秒数,根据秒数来计算,需要自己判断

const countDown = () => {

let d = parseInt(seconds.value / (24 * 60 * 60));

d = d < 10 ? "0" + d : d;

let h = parseInt((seconds.value / (60 * 60)) % 24);

h = h < 10 ? "0" + h : h;

let m = parseInt((seconds.value / 60) % 60);

m = m < 10 ? "0" + m : m;

let s = parseInt(seconds.value % 60);

s = s < 10 ? "0" + s : s;

count.value = m + "分" + s + "秒";

// console.log('监听',count.value );

};

//

const timed = () => {

dsq.value = setInterval(() => {

seconds.value -= 1;

countDown();

}, 1000);

};

}

这样下来,一个倒计时30分钟的定时器就写好了

相关推荐
吃阿茶搽19 小时前
大模型RAG实战,从被骂不靠谱到成为部门MVP,我的踩坑全记录
vue.js
情多多7719 小时前
基于NetCorePal Cloud Framework的DDD架构管理系统实践
javascript
小林ixn20 小时前
前后端模块化分离实战:从零搭建用户列表展示(HTML+CSS+JS + json-server)
前端·javascript
天才熊猫君20 小时前
我把一个 bug 发给 ai,ai 直接通过 playwright mcp 直接排查出 bug。。
前端·javascript
meilindehuzi_a20 小时前
打破0基础:通过 5 个核心案例深度拆解 JavaScript 正则表达式与运行时类型系统
开发语言·javascript·正则表达式
时寒的笔记20 小时前
LF11期 day21-day22:逆向瑞数加密 欧冶案例分析(一)
javascript
lbb 小魔仙20 小时前
稳定比技巧更重要:海外多地区数据采集的经验教训
开发语言·javascript·ecmascript
布兰妮甜20 小时前
Vue 视图不更新?常见赋值踩坑点汇总
前端·javascript·vue.js·vue踩坑·vue视图不更新
rising start20 小时前
三、Vue3 模板语法
vue.js
我有满天星辰20 小时前
【Dart 语言学习教程 】第三章:函数式编程与高阶特性
开发语言·javascript·ecmascript