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

相关推荐
小羊没烦恼!1 小时前
.NET无侵入自动化探针原理和主流实现
运维·开发语言·javascript·python·自动化·.net·1024程序员节
Linux_cy9 小时前
服务器管理工具哪个好用?我用了七八个
运维·服务器·javascript·python·ssh·面板·gmssh
变与不变80610 小时前
jQuery细节以及使用应用场景
前端·javascript·jquery
এ慕ོ冬℘゜16 小时前
ES Promise.all/ Promise.race
前端·javascript·elasticsearch
只睡四小时18 小时前
端侧推理:face-api.js 首屏 92% 是白下载的
开发语言·javascript·人脸识别·ecmascript·tensorflow.js·face-api.js·端侧推理
用户831348593069818 小时前
Vue3 v-for:常用用法与开发高频坑点
前端·javascript·vue.js
Funlang18 小时前
fun-ui 开源:把浏览器界面接回来
前端·javascript
2603_9658966218 小时前
CSS BEM 命名规范|组件化样式分层权威指南
前端·javascript·css
忆挽篱笙歌19 小时前
进程替换函数与shenll命令行解释器
前端·javascript·算法
小冯不疯20 小时前
688 / 拼多多 / 淘特三类供货链路:从采购单到应付凭证的 4 段对账
javascript