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

相关推荐
uuai1 小时前
echarts不同版本显示不一致问题
前端·javascript·echarts
自然 醒1 小时前
企业微信自建应用开发详细教程,如何获取授权链接?如何使用js-sdk?
javascript·vue.js·企业微信
AKclown1 小时前
基于Monaco的diffEditor实现内容对比
前端·vue.js·react.js
Moonbit1 小时前
MoonBit Pearls Vol.12:初探 MoonBit 中的 Javascript 交互
javascript·后端·面试
chenbin___2 小时前
react native中 createAsyncThunk 的详细说明,及用法示例(转自通义千问)
javascript·react native·react.js
gongzemin2 小时前
使用阿里云ECS部署前端应用
前端·vue.js·后端
用户9714171814272 小时前
前端开发中的跨域问题:Vite 开发环境配置指南
vue.js·vite
技术小丁2 小时前
使用 HTML + JavaScript 实现酒店订房日期选择器(附完整源码)
前端·javascript
hashiqimiya2 小时前
harmonyos的鸿蒙的跳转页面的部署
开发语言·前端·javascript
闭着眼睛学算法2 小时前
【双机位A卷】华为OD笔试之【排序】双机位A-银行插队【Py/Java/C++/C/JS/Go六种语言】【欧弟算法】全网注释最详细分类最全的华子OD真题题解
java·c语言·javascript·c++·python·算法·华为od