基于vue的短信验证码倒计时demo

2025-10-16 13:58:46

最近做了一个小的demo，分享给大家，在很多地方都能用到。

一般获取短信验证码的时候会用到这个demo：

button里面包两个span标签，根据点击状态，显示不同的span，关键代码就是倒计时：

 <div id="example">
  <button @click="send">
   <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
   <span v-if="!sendMsgDisabled">send</span>
  </button>
 </div>

 button {
  width: 100px;
  height: 50px background: pink;
 }

var vm = new Vue({
  el: '#example',
  data() {
   return {
    time: 60, // 发送验证码倒计时
    sendMsgDisabled: false
   }
  },
  methods: {
   send() {
    let me = this;
    me.sendMsgDisabled = true;
    let interval = window.setInterval(function() {
     if ((me.time--) <= 0) {
      me.time = 60;
      me.sendMsgDisabled = false;
      window.clearInterval(interval);
     }
    }, 1000);
   }
  }
 })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

简单实现vue验证码60秒倒计时功能

本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html <span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> js data(){ return { show: true, count: ''
基于vue的短信验证码倒计时demo

最近做了一个小的demo,分享给大家,在很多地方都能用到. 一般获取短信验证码的时候会用到这个demo: button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span
基于PHP实现短信验证码接口（容联运通讯）

自己也是刚刚研究,希望对也在研究的伙伴有帮助. 步骤: 1.登录荣联运通讯注册获取ACCOUNT SID.AUTH TOKEN.Rest URL(生产).AppID(默认): 2.注册测试用手机号码(先注册测试号码方可使用): 3.下载demo示例,并将代码放到项目中(最好单独建文件夹存储). 代码区: 一.新建test.app.php(测试用控制器) <?php /* * 短信接口测试 */ class TestApp extends ShoppingbaseApp{ public funct
vue实现短信验证码登录功能（流程详解）

无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能,输入手机号,得到验证码,最后先服务器发送请求,保存登录的信息,一个必不可少的功能思路 1,先判断手机号和验证是否为空, 2,点击发送验证码,得到验证码 3,输入的验证码是否为空和是否正确, 4,最后向服务发送请求界面展示 1.准备工作这个会对input进行封装处理 <template> <div class="text_group"> <div class="input_
swift 3.0 实现短信验证码倒计时功能

下面一段代码给大家分享swift 3.0 实现短信验证码倒计时功能,具体实例代码如下所示: class TCCountDown { private var countdownTimer: Timer? var codeBtn = UIButton() private var remainingSeconds: Int = 0 { willSet { codeBtn.setTitle("重新获取\(newValue)秒", for: .normal) if newValue <=
ReactNative短信验证码倒计时控件的实现代码

由于最近刚开始认真的搞RN,可能有一些封装的不是最佳实践,还是希望大家多提意见,和大家一起进步吧.本文介绍了ReactNative短信验证码倒计时控件,分享给大家功能根据项目的需要,需要写一个自定义的控件,实现如下功能: 默认文字为点击获取验证码点击后出现60秒的倒计时颜色,字号可调倒计时过程中,再次点击需要忽略掉倒计时完成后文本恢复成点击获取验证码再几次点击同之前其实说了这么多,就是个最普通的验证码的功能... 效果效果图如下:(录的图片比较一般,对付着看吧) 实现原理自己
JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）

1.功能描述当用户想要获取验证码时,就点击免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U
JS获取短信验证码倒计时的实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: $(function() { var phone_num = /^1\d{10}$/; var flag = 1; //短信发送时标志位 $(".getcode").click(function() { if($("#phone").val() == "") { alert("请输入电话号码!"); return false; }; if(!phone_num.test($
Android使用Kotlin和RxJava 2.×实现短信验证码倒计时效果

本文介绍了Android使用Kotlin和RxJava 2.×实现短信验证码倒计时效果,分享给大家,具体如下: 场景:注册账号页面时,我们点击按钮发送验证码,在等待验证码时,界面会有倒计时提示,这此期间按钮不可点击.当倒计时结束时,按钮恢复. 实现代码 val timer:TextView = findViewById(R.id.textView) //这里的 timer 就是你要控制显示倒计时效果的 TextView val mSubscription: Subscription? = nul
vue实现短信验证码输入框

本文实例为大家分享了vue实现短信验证码输入框的具体代码,供大家参考,具体内容如下先上最终效果 (此处代码显示的是短信验证码框的效果其余部分并未放上去) html <div class="code"> <input id="first" class="inputStyle" v-model="code[0]" style="border-top-left-radius: 12px; bord
微信小程序实现发送短信验证码倒计时

本文实例为大家分享了微信小程序发送短信验证码倒计时的具体代码,供大家参考,具体内容如下效果图 WXML文件 <view class="container"> <view class="userinfo"> <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image&

基于vue的短信验证码倒计时demo

相关推荐

随机推荐