记录一个自己实现倒计时的方法,现在可以网上有很多插件,自己实现记录一下

// 倒计时
countDown() {
this.disabled = true
let number = 60
this.count = `请${number}秒后重试`
let myCountDown
clearInterval(myCountDown)
myCountDown = setInterval(() => {
number--
this.count = `请${number}秒后重试`
if (number == 0) {
clearInterval(myCountDown)
this.count = '刷新二维码'
this.disabled = false
}
}, 1000)
},

这个可以进一步的进行倒计时优化,可以进行时间的传入进行简单的倒计时

博客园,记录开发瞬间

记录实现倒计时的方法,配合按钮的disabled的更多相关文章

  1. SQL Server 数据库查找重复记录的几种方法

    http://www.hanyu123.cn/html/c61/6790.html 一.查某一列(或多列)的重复值.(只可以查出重复记录的值,不能查出整个记录的信息) 例如:查找stuid,stuna ...

  2. 【转】oracle 中随机取一条记录的两种方法

    oracle 中随机取一条记录的两种方法 V_COUNT INT:=0; V_NUM INT :=0; 1:TBL_MYTABLE 表中要有一个值连续且唯一的列FID BEGIN SELECT COU ...

  3. PHP获取MySql新增记录ID值的方法

    今天发现用mysql_insert_id()获取到的新增记录的id不正确, 虽然发现源代码的事务写的有问题,但是最根本的原因是,我插入数据的id类型是bigint型 获取MySql新增记录ID值的方法 ...

  4. java中的List记录是否完全匹配方法

    今天要说的是给List分组,然后用Map来封装,可能你看了以后还是有一些模糊. 先看一下项目结构图: User类是一个VO类,主要逻辑还是在MapTestBak上面. 运行效果: 原理图: 1.在st ...

  5. Apache日志不记录图片文件设置方法和来源日志的配置

    Apache日志不记录图片文件设置方法 <FilesMatch "\.(ico|gif|jpg|swf)">SetEnv IMAG 1</FilesMatch&g ...

  6. Nginx正确记录post日志的方法

    Nginx正确记录post日志的方法 事实上可以很简单,这取决于把 access_log 放在哪个 location 里面. 一,放到包含fastcgi_pass或proxy_pass的Locatio ...

  7. spring+hibernate删除单条记录的几种方法

    spring+hibernate删除单条记录的几种方法

  8. Linux实战案例(4)CentOS清除用户登录记录和命令历史方法

    CentOS清除用户登录记录和命令历史方法 清除登陆系统成功的记录[root@localhost root]# echo > /var/log/wtmp //此文件默认打开时乱码,可查到ip等信 ...

  9. oracle中查找和删除重复记录的几种方法总结

    平时工作中可能会遇到当试图对库表中的某一列或几列创建唯一索引时,系统提示 ORA-01452 :不能创建唯一索引,发现重复记录. 下面总结一下几种查找和删除重复记录的方法(以表CZ为例): 表CZ的结 ...

  10. django查询表记录的十三种方法

    django查询表记录的十三种方法 all() 结果为queryset类型 >>> models.Book.objects.all() <QuerySet [<Book: ...

随机推荐

  1. Clickhouse副本及分片

    副本 副本的目的主要是保障数据的高可用性,即使一台 ClickHouse 节点宕机,那么也可以从其他服务器获得相同的数据 配置副本 1. zookeeper集群准备 2. Clickhouse准备两个 ...

  2. 3.10 Linux创建目录(mkdir命令)

    mkdir 命令,是 make directories 的缩写,用于创建新目录,此命令所有用户都可以使用. mkdir 命令的基本格式为: [root@localhost ~]# mkdir [-mp ...

  3. 现代IT基础设施管理(1):Terraform初识和小试牛刀

    基础设施包括各种云,像国内的阿里云.腾讯云和华为云,国外的AWS.微软Azure云和谷歌云,还有Kubernetes和OpenStack,都可以用Terraform进行资源管理.使用基础设施即代码(I ...

  4. 多校A层冲刺NOIP2024模拟赛09

    多校A层冲刺NOIP2024模拟赛09 考试唐完了,T2.T4 都挂了 100 分,人麻了. 排列最小生成树 给定一个 \(1, 2,\dots , n\) 的排列 \(p_1, p_2,\dots, ...

  5. P5987 [PA2019] Terytoria / 2023NOIP A层联测13 T3 全球覆盖

    P5987 [PA2019] Terytoria / 2023NOIP A层联测13 T3 全球覆盖 题面及数据范围 对于一个点对,可以降维为线段,转化为 1 维的问题. 如图: 我们可以在横着的方向 ...

  6. 解决IDEA中xxxMapper.xml文件表名,字段爆红问题

    我们在编写xxxMapper.xml中sql代码的时候有时会出现表名不会提示,表名爆红等情况,这个一般是没有设置IDEA的sql解析范围,下面是我遇到问题时候的解决办法 1.打开IDEA设置 2.选择 ...

  7. 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-6- 元素基础定位方式-上篇 (详细教程)

    1.简介 从这篇文章开始,就开始要介绍UI自动化核心的内容,也是最困难的部分了,就是:定位元素,并去对定位到的元素进行一系列相关的操作.想要对元素进行操作,第一步,也是最重要的一步,就是要找到这个元素 ...

  8. golang之常用命令

    golang常用操作与命令 1.执行golang文件 go run hello_world.go 2.编译成可执行文件(交叉编译) go build hello_world 则会生成hello_wor ...

  9. Vue 二维码组件

    1.前言 该组件依赖qrcode.js与element-ui 支持二维码大小配置,点击大图预览 该组件以vue文件形式进行封装,需要配置httpVueLoader插件进行引入,其他格式请自行更改源码 ...

  10. .NET周刊【12月第1期 2024-12-01】

    我在.NET Conf China 2024 等你! .NET Conf China 2024 是一场面向开发人员的社区盛会,旨在庆祝 .NET 9 的发布,并回顾过去一年 .NET 在中国的发展成就 ...