微信小程序验证码倒计时效果、填手机号获取验证码倒计时后重新获取效果、手机登录

最新推荐文章于 2021-07-17 15:36:31 发布

原创

最新推荐文章于 2021-07-17 15:36:31 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了微信小程序中实现验证码倒计时效果和手机登录过程，包括填手机号获取验证码，倒计时结束后如何重新获取验证码的逻辑。在用户输入正确手机号并验证验证码后，登录按钮变为可点击状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序验证码倒计时效果

如果写过js的倒计时，那么小程序中使用也是差不多的；

代码：

  data: {
   
  	daojishi:60,
	inter:''
	},
  daojishi: function () {
   
    this.data.inter = setInterval((res) => {
   
      this.fun();
    }, 1000);
  },
  fun: function () {
   
    let t = this.data.daojishi;
    t--;
    this.setData({
   
      daojishi: t
    })
    if (t <= 0) {
   
      // location.href = "https://www.baidu.com";
      clearInterval(this.data.inter);
      this.setData({
   
        isyanzhengma: true
      })
    }
  },

手机登录、填手机号获取验证码倒计时后重新获取效果

描述：
输入正确的手机号并且输入验证码后，手机登录按钮变为红色可点击状态；自动验证输入的手机号是否为合法手机号；点击获取动态码后开始60秒倒计时后才可以再次获取动态码；

效果图：
在这里插入图片描述
代码：
html:

<view class="dltel">
  <view class="teltit">手机快捷登录</view>
  <view class="inpbox">
    <input placeholder="请输入手机号" class="inpbtn" type='number' maxlength="11" value="{
    {mobile}}" bindinput='blurPhone' />
    <text class="dongtaima {
    {hui?'hui':'red'}}" wx:if="{
    {isyanzhengma}}" bindtap="dongtaima">获取动态码</text>
    <text class="dongtaima" wx:else>重发（{
  {daojishi}}）