vue3验证码倒计时60s

//倒计时60s

const timeNum = ref(60);
const countDown = ref();
const isShowSend = ref(true); const getSetInterval = (): void => {
countDown.value = setInterval(() => {
setTimeout(() => {
if (timeNum.value > 0 && timeNum.value <= 60) {
isShowSend.value = false;
timeNum.value--;
} else {
isShowSend.value = true;
clearInterval(countDown.value);
}
}, 0);
}, 1000);
}; return {
isShowSend,
timeNum,
countDown,
}

vue验证码倒计时60s的更多相关文章

  1. 获取验证码倒计时60s

    倒计时函数: function time(btns) { if (wait == 0) { btns.css("background-color","#F84C02&qu ...

  2. vue 验证码倒计时

    //html <div class="input-div" v-show="formData.phone"> <input type=&quo ...

  3. 发送验证码倒计时60s

    var wait=60; function time(o) { if (wait == 0) { o.removeClass("gray"); o.text("发送验证码 ...

  4. jq实现发送验证码倒计时60s

    setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. setTimeout() :在指定的毫 ...

  5. vue实现验证码倒计时60秒的具体代码

    vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...

  6. vue获取验证码倒计时

    <template> <div> <el-button :disabled="disabled" @click="sendcode" ...

  7. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  8. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

  9. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  10. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

随机推荐

  1. 「postOI」以另一种方式证明 FWT

    记号 \(\otimes\) 代表或/与/异或卷积: \(\oplus\) 代表"拼接",例如 \(A\oplus B\) 即将 \(B\) 接在 \(A\) 的后面: \(+,- ...

  2. 微信小程序隐私指引完整填写范本(开发者收集你选中的照片或视频信息,用于?)

    为了分辨用户,开发者将在获取你的明示同意后,收集你的微信昵称.头像.为了显示距离,开发者将在获取你的明示同意后,收集你的位置信息.开发者收集你的地址,用于获取位置信息.开发者收集你的发票信息,用于维护 ...

  3. 7.29关灯游戏,用script实现

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  4. 在C#中Release与Debug的区别小案例

    我们都听说过C#写的代码 Release通常会比Debug性能要好一点跑得快一些. 先普及一些相关基础知识: (1)在CLR中将对sbyte.byte.short.ushort.int.uint.ch ...

  5. 2022-03-02 关于 react-native 如何使用 react-native-image-crop-picker

    前言:react-native项目(下称rn)中需要用到图片裁剪.从相册取照片以及调用手机相机,主要用到这个插件react-native-image-crop-picker. 安装: yarn add ...

  6. 性能测试-性能分析思路以及CPU

    1.性能分析思路 性能测试分析的思路:先分析硬件 .网络. 系统配置.应用程序 硬件: cpu.内存.磁盘.网络.io 4.常见问题处理4.1 常见问题及解决方法如果r经常大于4,且id经常少于40, ...

  7. 使用go自定义生成项目LISENSE(授权协议)

    需要使用一个使用go开发的工具,叫license,在Windows下安装这个工具,请确保你使用的go sdk是1.16以上的版本,然后执行下面的命令: go install github.com/ni ...

  8. ES-索引库

    数据准备 本次学习涵盖ES简单查询,聚合查询,所以在创建测试库时会可以涵盖一些个性化字段,用于学习搜索用法 索引创建 几个疑问 1.能否用中文命名 安排:我用"蓝闪test",中英 ...

  9. 使用ts二次封装storage(sessionStorage/localStorage)

    export class LocalCache { setCache<T = any>(key: string, value: T): boolean; setCache<T = a ...

  10. API对象--Ingress(chrono《kubernetes入门实战课》笔记整理)

    [概念说明] Service 的功能和运行机制,主要由 kube-proxy 控制的四层负载均衡,即根据IP.PORT来做负载均衡.而很多应用都是在7层做均衡更为合理,比如根据主机名.URI.请求头. ...