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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/30196.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是 Linux From Scratch (LFS)?

Linux From Scratch (LFS) 是一个项目和一本书&#xff0c;指导用户从头开始构建自己的自定义Linux系统&#xff0c;而不是使用现成的Linux发行版。LFS项目由 Gerard Beekmans 在1999年创建&#xff0c;旨在帮助用户了解Linux的内部工作原理&#xff0c;并提供对系统的完全控制…

JavaScript 逻辑赋值运算符(=,||=,??=)与可选链运算符(?. ??)

一、 短路运算 短路运算是一种常见的逻辑运算方式&#xff0c;其核心机制是在运算过程中进行一些优化和简化&#xff0c;从而提高计算效率和减少资源消耗。特别是在处理逻辑与&#xff08;&&&#xff09;和逻辑或&#xff08;||&#xff09;运算时&#xff0c;如果左侧…

在3dmax软件中如何快速创建毛发?---模大狮模型网

在3D建模和渲染中&#xff0c;为角色或物体添加逼真的毛发效果是提升场景真实感的重要步骤之一。然而&#xff0c;手动一根一根创建毛发是非常繁琐的&#xff0c;因此掌握如何在软件中快速生成和调整毛发效果至关重要。模大狮将详细介绍如何利用3ds Max 2018创建毛发&#xff0…

Sip协议(二)

Sip协议(二) 本文继续介绍Sip协议,主要介绍Sip请求 INVITE. 1: INVITE请求 下面是一个简单的例子: INVITE sip:xxx100.100.0.1 SIP/2.0 Via: SIP/2.0/TCP 发起者IP:40852;rport;branchz9hG4bK64259 Max-Forwards: 70 To: <sip:xxxx100.100.0.1> From: <sip:xxx100…

面试_多线程

线程池 线程池的参数有哪些 线程池七大参数分别是corePoolSize、maximumPoolSize、keepAliveTime、unit、workQueue、threadFactory、handler corePoolSize&#xff1a;线程池中常驻核心线程数maximumPoolSize&#xff1a;线程池能够容纳同时执行的最大线程数keepAliveTime&…

Salia PLCC cPH2 远程命令执行漏洞(CVE-2023-46359)

漏洞描述 Salia PLCC cPH2 v1.87.0 及更早版本中存在一个操作系统命令注入漏洞&#xff0c;该漏洞可能允许未经身份验证的远程攻击者通过传递给连接检查功能的特制参数在系统上执行任意命令。 产品界面 fofa语法 "Salia PLCC" POC GET /connectioncheck.php?ip1…

前端开发之DNS协议

上一篇&#x1f449;: 前端开发之计算机网络模型认识 文章目录 DNS协议详介绍1. DNS 协议概述2. DNS协议与TCP/UDP3. DNS查询过程4. 迭代与递归查询5. DNS记录与报文结构资源记录类型对比 6. 总结 DNS协议详介绍 1. DNS 协议概述 DNS&#xff08;Domain Name System&#xf…

如何使用React的Context API来实现跨组件的状态共享?

在React中&#xff0c;Context API是一种用于跨组件共享状态的方法。以下是使用React的Context API实现跨组件状态共享的基本步骤&#xff1a; 创建Context&#xff1a;首先&#xff0c;你需要创建一个Context对象。可以使用React.createContext()方法来创建一个新的Context实…

UVa12227/LA4618 Wormholes

UVa12227/LA4618 Wormholes 题目链接题意分析测试数据AC 代码 题目链接 本题是2009年icpc欧洲区域赛西北欧赛区的j题 UVA - 12227 Wormholes 题意 你有一艘星际飞船&#xff0c;飞船运行速度为1&#xff0c;打算从坐标a旅行到坐标b&#xff08;出发时刻为0&#xff09;&#x…

线程池的艺术:深度解析Java多线程并发性能的优化之道

1. 引言 在高并发的Java应用开发中,线程池作为管理和复用线程资源的核心机制,扮演着举足轻重的角色。合理、高效地使用线程池不仅能减少资源消耗、提高系统响应速度,还能有效控制并发线程数量,保证系统的稳定性和性能。 2. 线程池的基本概念与优势 线程池是一种管理和复用…

发论文idea来了!强化学习+Transformer,29个创新点汇总

基于Transformer的强化学习&#xff08;TRL&#xff09;是一种利用Transformer模型架构来改进和增强强化学习算法性能的方法。 这种方法通过结合Transformer模型强大的表示能力和强化学习的决策优化框架&#xff0c;显著提升了智能体的学习能力和适应能力&#xff0c;为我们解…

dockerfile文件的中的命令

# 基础镜像 FROM registry.cn-beijing.aliyuncs.com/205erp/myopenjdk:8.6 # 设置工作目录 WORKDIR /opt # 拷贝jar包到工作目录 COPY target/*.jar app.jar RUN ls # 设置暴漏的端口 EXPOSE 8080 # 启动jar包 CMD java ${JAVA_TOOL_OPTIONS} -jar app.jar

N7745A Keysight 是德 多端口光功率计 简述

N7745A光功率计专为表征多端口光器件而设计&#xff0c;适用于多路复用器、PON分路器、波长选择开关&#xff08;WSS&#xff09;和ROADM等多端口器件的测试。它可以节省通道空间&#xff0c;通过LAN或USB连接进行并行编程&#xff0c;集成多种设备到单一设置&#xff0c;提高了…

Android C++系列:函数知识知多少

1. 背景 函数可以理解为功能的封装&#xff0c;很基础的功能单元&#xff0c;但是因为它虽然看似简单&#xff0c;但是里面涉及了不少知识点和技巧&#xff0c;我们花一篇文章来整理。 2. 函数定义 函数有以下几部分定义&#xff1a; 返回类型函数名称形参列表函数体 函数…

企业设备管理现状与解决方案

在当今企业运营中&#xff0c;设备管理作为保障生产稳定、提升效率的重要环节&#xff0c;其复杂性和挑战性日益凸显。无论是生产车间、石油化工、物业小区&#xff0c;还是消防器材、建筑施工等领域&#xff0c;都面临着设备故障频发、维修流程繁琐等共性问题。 为了帮助企业…

Shell编程练习:掌握命令行的魔法

1、编写一个 shell 脚本&#xff0c;它把第二个位置参数及其以后的各个参数指定的文件复制到第一个位置参数指定的目录中。 #!/bin/bash# 检查是否提供了至少两个参数 if [ "$#" -lt 2 ]; thenecho "使用方法: $0 目标目录 文件..."exit 1 fi# 第一个位置…

6.19作业

TCP服务器 #include <stdio.h> #include <sys/types.h> #include <sys/socket.h> #include <unistd.h> #include <arpa/inet.h> #include <netinet/in.h> #include <string.h>#define PORT 8888 #define IP "192.168.124.39&q…

VUE3实现个人网站模板源码

文章目录 1.设计来源1.1 网站首页页面1.2 个人工具页面1.3 个人日志页面1.4 个人相册页面1.5 给我留言页面 2.效果和源码2.1 动态效果2.2 目录结构 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1…

对比4090及4090D:国区“特供”与原版相比有何区别?

2023年12月28日 英伟达宣布正式发布GeForce RTX 4090D&#xff0c;对比于一年前上市的4090芯片&#xff0c;两者的区别与差异在哪&#xff1f;而在当前比较火热的大模型推理、AI绘画场景方面 两者各自的表现又如何呢&#xff1f; 规格与参数信息对比现在先来看看GeForce RT…

SCI绘图【1】-不同颜色表示密度和差异--密度图

参考资料&#xff1a;密度图&#xff08;Density Plot&#xff09; - 数据可视化图表 - 数字孪生百科 密度图是快速观察变量数值分布的有效方法之一。通常情况下&#xff0c;会根据两个变量将平面绘图区域分为非常多的子区域&#xff0c;之后以不同颜色表示落在该区域上样本的…