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

2024-10-05 20:44:22

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

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

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

希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序实现短信验证码倒计时

本文实例为大家分享了微信小程序实现短信验证码倒计时的具体代码,供大家参考,具体内容如下初始效果当点击按钮时候设置禁止点击效果:如下图话不多说,直接上代码 1.wxml部分 <view> <block wx:if="{{Num==60 || Num==-1}}"> <button bindtap="countDown">获取验证码</button> </block>
微信小程序的注册页面包含倒计时验证码、获取用户信息

1.页面展示 2.wxml代码  <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id="telphone" maxlength='11'
微信小程序实现验证码倒计时

本文实例为大家分享了微信小程序实现验证码倒计时的具体代码,供大家参考,具体内容如下 wxml代码: <view class='container'> <form bindsubmit='denglu'> <view class='list'> <view class='left'> <label>手机号:</label> <input type='number' name=
微信小程序实现验证码获取倒计时效果

本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下 wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button> js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获
微信小程序实现发送短信验证码倒计时

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

本文实例为大家分享了微信小程序验证码倒计时效果的具体代码,供大家参考,具体内容如下如果写过js的倒计时,那么小程序中使用也是差不多的: 代码: data: { daojishi:60, inter:'' }, daojishi: function () { this.data.inter = setInterval((res) => { this.fun(); }, 1000); }, fun: function () {
微信小程序项目实践之验证码倒计时功能

效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字首先js文件的data里面声明一个变量用于表示当前是否可以点击,codeIsCanClick = true, 默认是可以点击的写下界面代码: wxml文件中 <view class='centerRow'> <view class='inputLabel'>动态码:</view> <input class='inputStyle' style="flex:1 " bin
微信小程序实现手机获取验证码倒计时60s

本文实例为大家分享了微信小程序实现手机获取验证码倒计时的具体代码,供大家参考,具体内容如下功能展示: WXML: <view class="all">  <view class="tel">  <view class="icon_tel"> <image class="tel_image
微信小程序实现倒计时60s获取验证码

本文实例为大家分享了微信小程序倒计时获取验证码的具体代码,供大家参考,具体内容如下 1.工具类(引用微信小程序提供的工具类) countdown.js class Countdown { constructor(options = {}) { Object.assign(this, { options, }) this.__init() } /** * 初始化 */ __init() { this.page = getCurrentPages()[getCurrentPages().length
小程序实现简单验证码倒计时

本篇文章主要讲关于小程序验证码倒计时的功能实现,供大家参考,具体内容如下首先是wxml部分 <form bindsubmit="regist"> <view class="vip-title">验证码</view> <input type="text" name="verifyCode" placeholder="验证码" value=&quo
小程序获取手机验证码倒计时的方法

本文实例为大家分享了小程序获取手机验证码倒计时的具体代码,供大家参考,具体内容如下 test: .wxss .bind_input{ width: 450rpx; height: 80rpx; padding: 0 20rpx; margin: 0 auto 20rpx auto; border-radius: 40rpx; border: #ddd solid 1px; display: flex; justify-content: space-between; align-items
微信小程序实现简单倒计时功能

本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下任务描述: 计时器任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白界面,过2秒后才显示计时界面,点击“开始计时”按钮后开始倒计时,点击“停止计时”按钮后停止计时. 实现效果:根据案例描述做出如下图效果,初始显示空白界面,2秒后显示计时界面(图1),数字为60,点击“开始计时”按钮后开始倒计时,点击“停止计时”按钮后停止计时(图2). index.wxml <!--index.wxm
详解微信小程序用定时器实现倒计时效果

平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用. 这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要考虑. 如果实现简单的60s倒计时效果,我们可直接使用setInterval即可,但是在微信小程序中,我们需要用微信小程序的语法,这时就会遇到一个难题,那就是怎么关闭定时器的问题,下面给出实例. WXML代码 <view class='countDown'>倒计时:<text style='
详解小程序之简单登录注册表单验证

这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容一.首先我是在util.js中引入表单正则验证规则,给予login.js来引用 function regexConfig() { var reg = { userid: /^[A-Za-z0-9]+$/, //邮箱正则验证 phone: /^1(3|4|5|7|8)\d{9}$/, //手机号正则验证 cards: /^[\u4e00-\u9fa5]{2,
微信小程序获取手机验证码的方法

本文实例为大家分享了微信小程序获取手机验证码的具体代码,供大家参考,具体内容如下完成手机验证码的功能: (1)效果图如下: (开始发送验证码) (重新发送验证码) (2)需求及思路说明: 输入正确的11位手机号,使用正则校验. 校验手机号的归属地----北京移动(这个根据需求而定) 点击 “获取验证码” ,获取成功与失败,都会以弹框的形式展现,完成倒计时. 倒计时为 ‘0’ 的时候,按钮文字变成 “重新发送” 当按钮是 “获取验证码” 和 “重新发送” 的时候,按钮是可以点击进行倒计时的在倒
微信小程序电商常用倒计时实现实例

微信小程序电商常用倒计时实现实例 wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second if (second == 0) { // console.log("Time Out..."); that.setData({ second: &q
javascript 初学教程及五子棋小程序的简单实现

一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 二.hbulider工具的使用 1) hbulider的特点: 1.飞快的编码速度 2.HBuilder直接创建移动App,打包为ios或Android原生安装包 3.HTML5语法.HTML5+
微信小程序实现简单input正则表达式验证功能示例

本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e
微信小程序实现简单表格

本文实例为大家分享了微信小程序实现简单表格的具体代码,供大家参考,具体内容如下效果图: wxml <view class="table"> <view class="tr bg-w"> <view class="th">SPB</view> <view class="th">DPB</view> <view class="th "

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

相关推荐

随机推荐