view代码

<view class="margin-top" @tap="getCheckNum()">
<view class="bg-purple">{{!codeTime?'获取验证码':codeTime+'s' + '后重试'}}</view>
</view>

css代码

.bg-purple {
text-align: center;
line-height: 45px;
border-radius: 50px;
}

js代码

    export default {
data() {
return {
codeTime: 0,
}
},
methods: {
getCheckNum() {
if (this.codeTime > 0) {
uni.showToast({
title: '不能重复获取',
icon: "none"
});
return;
} else {
this.codeTime = 60
let timer = setInterval(() => {
this.codeTime--;
if (this.codeTime < 1) {
clearInterval(timer);
this.codeTime = 0
}
}, 1000)
}
}
}, }

unaipp 发送验证码倒计时的更多相关文章

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

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

  2. react native中的聊天气泡以及timer封装成的发送验证码倒计时

    今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以 ...

  3. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  4. jQuery实现发送验证码倒计时60秒

    前端HMTL: <div class="form_box"> <div class="line mb40"> <div class ...

  5. 34 Flutter仿京东商城项目 用户注册 注册流程 POST发送验证码 倒计时功能 验证验证码

    加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 以下列出的是本课涉及的文件. RegisterFirst.dart import 'package:flutter/ ...

  6. js实现发送验证码倒计时按钮

    在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...

  7. jQuery手机发送验证码倒计时代码

    <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script type=&q ...

  8. js 发送验证码倒计时

    首先写一个按钮: <input type="button" id="btn" value="免费获取验证码" onclick=&quo ...

  9. js实现发送验证码倒计时效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

随机推荐

  1. mm系列权重文件瘦身

    瘦身脚本: (会在resnet50.pth文件的同级目录下生成一个resnet50_thin.pth) import os import torch root_dir = os.getcwd() de ...

  2. redis+lua脚本实现接口限流

    写在前面 在多线程的情况下对一个接口进行访问,如果访问次数过大,且没有缓存存在的情况下大量的请求打到数据库可能会存在数据库宕机,从而造成服务的不可用性.往往我们需要对其进行限流操作用来保证服务的高可用 ...

  3. kubernetes集群最新版安装

    原文地址:https://haiyux.cc/2022/09/21/k8s-install/ 虚拟机准备 我这里准备了三台虚拟机,分别部署一个master和两个node,操作系统位ubuntu 20. ...

  4. 【开通指南】 实时计算 Flink 全托管版本

    简介: [开通指南]实时计算 Flink 全托管版本 1.试用的实时计算 Flink 版产品是后付费还是预付费?是否有额外费用产生?预付费,有额外的SLB费用,一天2元封顶.(开通 Flink 全托管 ...

  5. 配置审计(Config)变配报警设置

    简介: 本文作者[紫极zj],本篇将主要介绍通过配置审计的自定义规则等服务,对负载均衡进行预警行为的相关介绍. 前言 配置审计(Config)将您分散在各地域的资源整合为全局资源列表,可便捷地搜索全局 ...

  6. 【ClickHouse 技术系列】- 在 ClickHouse 中处理实时更新

    ​简介:本文翻译自 Altinity 针对 ClickHouse 的系列技术文章.面向联机分析处理(OLAP)的开源分析引擎 ClickHouse,因其优良的查询性能,PB级的数据规模,简单的架构,被 ...

  7. [FAQ] Quasar BEX Bridge 通信方式 this.$q.bex 未定义的问题

      Bridge 是一个基于 Promise 的事件系统,在BEX的所有部分之间共享,允许在你的Quasar App中监听事件,从其它部分发出它们. 你可以使用 $q.bex 从你的 Quasar A ...

  8. [Contract] truffle-flattener 合并 Solidity 文件的依赖到一个文件

    使用 $ npm install truffle-flattener -g $ truffle-flattener <solidity-files> > output.sol 为什么 ...

  9. VUE知识体系、VUE面试题

    1. computed(计算属性)和方法有什么区别? 计算属性本质上是包含 getter 和 setter 的方法 当获取计算属性时,实际上是在调用计算属性的 getter 方法.vue 会收集计算属 ...

  10. Java 泛型,这次面试我表现很棒!

    public interface JpaRepository<T, ID> extends PagingAndSortingRepository<T, ID>, QueryBy ...