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

相关推荐
竹林8182 小时前
用 wagmi v2 + viem 监听链上事件,我踩了三天坑终于搞懂了实时日志与历史补全
javascript
Momo__2 小时前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
只一2 小时前
😭从回调地狱到 async/await:一文打通 Ajax 与 JS 异步编程
javascript
程序员小富2 小时前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
weedsfly3 小时前
语法糖褪去之后——Babel 转译产物中的 JavaScript 本貌
前端·javascript
JustHappy3 小时前
「软件设计思想杂谈🤔」“切图仔”也能懂编译原理?框架源码也许没那么难。聊聊 Vue 的编译(上)
前端·javascript·vue.js
晓得迷路了4 小时前
栗子前端技术周刊第 134 期 - React Router v8、TypeScript 7 RC、React Native 0.86...
前端·javascript·react.js
代码煮茶19 小时前
React 组件封装方法论 —— 以 Todo App 为例
javascript·react.js
任沫20 小时前
Agent之Function Call
javascript·人工智能·go
默_笙21 小时前
🛬 我让 AI 帮我写了一个打飞机游戏,结果 Canvas 把我整不会了
前端·javascript