当前位置: 首页 > news >正文

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

 

相关文章:

  • Kantana和The Sandbox联手打造元宇宙娱乐的未来
  • Android开启HTTP服务
  • 微服务必备容器化技术
  • LUA移植到STM32F4,移植REPL,通过RTT Viewer交互
  • GraogGNSSLib学习
  • 医学人工智能在“免疫组化”领域的最新研究进展|顶刊速递·24-06-19
  • 美业人专用宝藏系统、Java收银系统源码分享-美业SAAS系统的应用价值分析
  • 关于INCA的几个实用功能
  • Top10在线音频剪辑软件,你了解几款?(免费分享)
  • 前端技术回顾系列 11|TS 中一些实用概念
  • Android C++系列:函数知识知多少
  • Linux时间子系统7:sleep timer接口定时实现
  • Anti-human IL-10 mAb (12G8), biotin:Mabtech热销品
  • vue大作业-实现学校官网
  • 【杂记-浅谈Sequence Number/序列号】
  • Docker下部署自己的LNMP工作环境
  • React Native移动开发实战-3-实现页面间的数据传递
  • React 快速上手 - 07 前端路由 react-router
  • 半理解系列--Promise的进化史
  • 警报:线上事故之CountDownLatch的威力
  • 前端设计模式
  • 网页视频流m3u8/ts视频下载
  • 微信公众号开发小记——5.python微信红包
  • 微信支付JSAPI,实测!终极方案
  • 一个完整Java Web项目背后的密码
  • ​configparser --- 配置文件解析器​
  • ​批处理文件中的errorlevel用法
  • ​无人机石油管道巡检方案新亮点:灵活准确又高效
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • (2)空速传感器
  • (Pytorch框架)神经网络输出维度调试,做出我们自己的网络来!!(详细教程~)
  • (Repost) Getting Genode with TrustZone on the i.MX
  • (附源码)计算机毕业设计SSM疫情下的学生出入管理系统
  • (力扣)循环队列的实现与详解(C语言)
  • (每日一问)基础知识:堆与栈的区别
  • (实战篇)如何缓存数据
  • (收藏)Git和Repo扫盲——如何取得Android源代码
  • (五)MySQL的备份及恢复
  • (转)Windows2003安全设置/维护
  • .net framework 4.0中如何 输出 form 的name属性。
  • .net mvc actionresult 返回字符串_.NET架构师知识普及
  • .net 后台导出excel ,word
  • .net反混淆脱壳工具de4dot的使用
  • [.net] 如何在mail的加入正文显示图片
  • [10] CUDA程序性能的提升 与 流
  • [18] Opencv_CUDA应用之 基于颜色的对象检测与跟踪
  • [Angular] 笔记 18:Angular Router
  • [codevs 1288] 埃及分数 [IDdfs 迭代加深搜索 ]
  • [cvpr 2024 目标检测 前沿研究 热点] cpvr 2024中与目标检测主题有关的论文
  • [C语言]——内存函数
  • [EFI]Acer Aspire A515-54g电脑 Hackintosh 黑苹果efi引导文件
  • [EFI]Lenovo ThinkPad X280电脑 Hackintosh 黑苹果引导文件
  • [ERROR]-Error: failure: repodata/filelists.xml.gz from addons: [Errno 256] No more mirrors to try.
  • [Excel]如何找到非固定空白格數列的條件數據? 以月份報價表單為例