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分钟的定时器就写好了

相关推荐
FungLeo41 分钟前
成为全栈·Vue管理后台篇·仪表盘不是几张卡片:组合统计接口与角色视图
前端·javascript·vue.js·rbac·仪表盘·管理后台·tanstack query
程序员大阳44 分钟前
HTML+CSS+JS对话式实战(7)-学生端活动报名功能开发
javascript·css·html·活动报名
ruanno_top1 小时前
可搜索的下拉框,键盘按不动:焦点进了下拉,事件还挂在触发器上
vue.js
西安小哥2 小时前
做 Agent 写到第三个小时,我开始给它算账
javascript
西安小哥2 小时前
让大模型操作浏览器跑了两周,我发现瓶颈根本不在模型
javascript
FungLeo2 小时前
成为全栈·Vue 管理后台篇·Vue Query:服务端数据缓存、query key与变更失效
vue.js·数据获取·前端缓存·前端状态管理·tanstack query·vue query
用户298698530142 小时前
用 Python 自动化把 JavaScript 代码转换为 Word 文档
javascript·python·api
学以智用2 小时前
正则表达式完整参考手册(JavaScript 版,兼容绝大多数语言)
javascript
北城笑笑2 小时前
Vue 109 ,从零搭建 Vue3 + Electron 工程:生态、安全桥接与打包选型( Vue + Electron )
前端·javascript·vue.js·安全·electron·vue
Highcharts.js3 小时前
Highcharts智能数据分析平台Orbit 多语言配置技术文档
java·前端·javascript·highcharts·orbit·智能数据分析·设置文档