小程序实现简单验证码倒计时

 更新时间:2022年07月28日 08:39:07   作者:久伍伍  
这篇文章主要为大家详细介绍了小程序实现简单验证码倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本篇文章主要讲关于小程序验证码倒计时的功能实现,供大家参考,具体内容如下

首先是wxml部分

<form bindsubmit="regist">
    <view class="vip-title">验证码</view>
      <input type="text" name="verifyCode" placeholder="验证码" value="{{verifyCode}}" style="width:310rpx" />
      <button class="captcha" bindtap="captcha" disabled="{{captchaDisabled}}" plain="true" disabled-class="disabled">{{captchaLabel}}</button>
    </view>
 </form>

样式部分:

/*提交按钮*/
form button {
    margin: 30rpx;
    background: #09f;
    color: white;
}

/*文本框容器*/
.input-container {
    margin: 40rpx 60rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6rpx;
}

/*文本框本身*/
.input-container input {
    color: #999;
    flex: 1;
    height: 40px;

}

/*占位符样式*/
.input-placeholder {
    color: #999;
}

/*清空按钮*/
.input-container image {
    width: 22px;
    height: 22px;
}

.forgot {
    margin: 0 30rpx 40rpx 30rpx;
    text-align: right;
    font-size: 28rpx;
    color: #ccc;
}
.captcha {
    margin: 0 8rpx;
    color: #fff;
    fon-size: 25rpx;
  p t-a
.button[plain] {
    color: #09f;

JS部分:

var timer = require('../../utils/timer.js');
Page({
    data: {
        verifyCode: '', //6617
        captchaLabel: '获取验证码',
        seconds: timer.length,
        captchaDisabled: false
    },
    onLoad: function() {

    },
    captcha: function(e) {
        var param = {
            phone: this.data.phone
        };
        // 禁用按钮点击
        this.setData({
            captchaDisabled: true
        });
        // 立刻显示重发提示,不必等待倒计时启动
        this.setData({
            captchaLabel: timer.length + '秒后重新发送'
        });
        // 启动以1s为步长的倒计时
        var interval = setInterval(() => {
            timer.countdown(this);
        }, 1000);
        // 停止倒计时
        setTimeout(function() {
            clearInterval(interval);
        }, timer.length * 1000);

        if (this.data.seconds == timer.length) {
            console.log('post');
            wx.showToast({
                title: '发送成功'
            });
        }
    },

})

timer.js :

var length = 5;

function countdown(that) {
    console.log('count down');
    var seconds = that.data.seconds;
    console.log(seconds);
    var captchaLabel = that.data.captchaLabel;
    if (seconds <= 1) {
        captchaLabel = '获取验证码';
        seconds = length;
        that.setData({
            captchaDisabled: false
        });
    } else {
        captchaLabel = --seconds + '秒后重新发送'
    }
    that.setData({
        seconds: seconds,
        captchaLabel: captchaLabel
    });
}

module.exports = {
    countdown: countdown,
    length: length
}

以上就是获取验证码功能的实现。

希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS实现的视频弹幕效果示例

    JS实现的视频弹幕效果示例

    这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascript基于事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • js里的prototype使用示例

    js里的prototype使用示例

    Object对象是common的原型,Object对象的属性和方法复制到了common上
    2010-11-11
  • TypeScript实现数组和树的相互转换

    TypeScript实现数组和树的相互转换

    树或者图是个比较抽象的概念,并不存在这样的数据类型。数组就比较简单了,因此数组和树的转换可以理解为数组和对象之间的转换。本文将用TypeScript实现数组和树的相互转换,感兴趣的可以了解一下
    2022-06-06
  • JS实现数组扁平化的方法总结

    JS实现数组扁平化的方法总结

    数组扁平化相信不少朋友在一些面试中被问到过,这在我们日常编程中也是一个常规操作,它需要我们将一个多维数组转化成一个一维数组,所以,借着这篇文章,我们今天就一起来汇总一下几种数组扁平化的方式,需要的朋友可以参考下
    2024-02-02
  • 用 js 写一个 js 解释器过程详解

    用 js 写一个 js 解释器过程详解

    这篇文章主要介绍了用 js 写一个 js 解释器过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 原生JS实现登录框邮箱提示

    原生JS实现登录框邮箱提示

    这篇文章主要为大家详细介绍了原生JS实现登录框邮箱提示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 教你如何通过JavaScript读取元素的样式

    教你如何通过JavaScript读取元素的样式

    这篇文章主要给大家介绍了关于如何通过JavaScript读取元素的样式,文中通过实例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    下面小编就为大家带来一篇原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 分享JS表单验证源码(带错误提示及密码等级)

    分享JS表单验证源码(带错误提示及密码等级)

    这篇文章主要介绍了JS表单验证源码(带错误提示及密码等级),代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • JavaScript 实现打印,打印预览,打印设置

    JavaScript 实现打印,打印预览,打印设置

    这篇文章主要介绍了JavaScript 实现打印,打印预览,打印设置的方法及示例分享,需要的朋友可以参考下
    2014-12-12

最新评论