小程序——验证码倒计时-即速应用

小程序——验证码倒计时

浏览量：1563 时间：2019-12-20 来源：久伍伍

本篇文章主要讲关于小程序验证码倒计时的功能实现。

小程序

小程序
首先是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}