微信小程序项目实践之验证码倒计时功能

效果如下：点击发送验证码按钮，按钮背景变色，不可点击，显示倒计时文字

　　首先js文件的data里面 声明一个变量用于表示当前是否可以点击，codeIsCanClick = true,  默认是可以点击的

　　写下界面代码：

　　wxml文件中

<view class='centerRow'>
 <view class='inputLabel'>动态码:</view>
 <input class='inputStyle' style="flex:1 " bindinput="bindKeyInput" placeholder="短信动态码" adjust-position='false'  confirm-type='search'></input>
 <button class="emailCode" hidden='{{!codeIsCanClick}}' size="mini" bindtap='clickCode'>获取动态码</button>
 <button class="emailCodeSend" hidden='{{codeIsCanClick}}' size="mini">{{last_time}}秒后重新发送</button>
</view>

　　对应样式 wxss文件：

.centerRow{
 display: flex;
 flex-direction: row;
 align-items: center;
 height: 44px;
 padding-left: 16px;
 padding-right: 16px;
 border-bottom: 1rpx solid #D9D9D9;
 border-top: 1rpx solid #D9D9D9;
}
.inputStyle{
 border-radius:4px;
 color:#D9D9D9;
 outline:0;
 padding-left: 4px;
 margin-left: 4px;
 margin-right: 20rpx;
 font-size: 14px;
}
.inputLabel{
 font-size: 16px;
 color: #33496D;
 width: 90px;
}
.emailCode{
 width: 118px;
 height: 28px;
 align-items: center;
 justify-content: center;
 display: flex;
 flex-direction: row;
 color:white;
 font-size: 14px;
 background-color: #50A2EC;
 border-radius: 14px;
}
.emailCodeSend{
 width: 118px;
 height: 28px;
 align-items: center;
 justify-content: center;
 display: flex;
 flex-direction: row;
 color:white;
 font-size: 14px;
 background-color: #B9DAF7;
 border-radius: 14px;
}

　　以上构成页面静态效果。

　　注意button有两个，分别对应的未点击和点击下的按钮样子，用js中的CodeIsCanClick控制显示隐藏

　　然后在js中写逻辑代码：

// 倒计时事件 单位s
var countdown = 10;
var settime = function (that) {
 if (countdown == 0) {
 that.setData({
  codeIsCanClick: true
 })
 countdown = 10;
 return;
 } else {
 that.setData({
  codeIsCanClick: false,
  last_time: countdown
 })
 countdown--;
 }
 setTimeout(function () {
 settime(that)
 }, 1000
 )
}
Page({
 /**
 * 页面的初始数据
 */
 data: {
 codeIsCanClick: true
 },
 /**
 * 点击验证码按钮
 */
 clickCode: function () {
 var that = this;
 settime(that)
 },

总结

以上所述是小编给大家介绍的微信小程序项目实践之验证码倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 微信小程序如何获取手机验证码

    微信小程序如何获取手机验证码

    一种比较常见的功能获取手机验证码,供大家参考,具体内容如下 先看效果图: 其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题 直接上代码吧: <view class='changeInfo'> <view class='changeInfoName'> <input placeholder='请输入姓名' bindinput='getNameValue' value='{{name}}'/> </view> <view class

  • 微信小程序6位或多位验证码密码输入框功能的实现代码

    在做小程序过程中做一个6位验证码输入框,本以为很简单,但是在写的时候遇到各种各样的阻力,在网上查阅资料也寥寥无几,后来经过一番思考,终于敲定下来本人最满意的方案,特意发出来让大家参考一下,希望能帮到大家! 一.效果图如下: 二.代码部分 wxml: <form bindsubmit="formSubmit"> <view class='content'> <block wx:for="{{Length}}" wx:key="i

  • 微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)

    下面一小段代码给大家介绍微信小程序 功能函数 密码验证*,具体代码如下所示: //登录输入密码 userPasswordInput: function (e) { var that = this; this.setData({ userPassword: e.detail.value }) // console.log(e.detail.value.length) // console.log(e.detail.value); var value = e.detail.value var str

  • 微信小程序实现倒计时60s获取验证码

    微信小程序实现倒计时60s获取验证码

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

  • 微信小程序实现验证码获取倒计时效果

    微信小程序实现验证码获取倒计时效果

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

  • 微信小程序实现随机验证码功能

    微信小程序实现随机验证码功能

    本文实例为大家分享了微信小程序实现随机验证码的具体代码,供大家参考,具体内容如下 效果图: 小程序上经常会有一些注册 申请页面需要用到随机验证码.具体实现方法不多说 直接上代码 <view class='yanzhengma'> <text class='left'>{[code]}</text> <text class='right' bindtap='huanyizhang'>换一张</text> </view> CSS: .ya

  • 微信小程序实现发送验证码按钮效果

    微信小程序实现发送验证码按钮效果

    本文实例为大家分享了微信小程序发送验证码按钮效果展示的具体代码,供大家参考,具体内容如下 首先上图,最终效果如下: 实现关键点 获取验证码按钮无边框: 可以用 button::after{ border: none; } 来去除边框,或者直接用view绑定点击事件.本例子中没有使用button 点击发送后,60秒内按钮处于disable状态 点击发送后,text分为剩余秒数和后缀两部分 .form_group 使用 flex 布局 代码 .wxml <view class="form_gr

  • 微信小程序项目实践之验证码倒计时功能

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

  • 微信小程序项目实践之主页tab选项实现

    官方文档 效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改 如图: 先介绍一下app.json文件 默认有两个代码块: 1.pages 这里注册了当前小程序的所有页面路径 2.window 这里用于设置小程序的状态栏.导航条.标题.窗口背景色. 以上两个详细使用参考文档,本文章不做介绍 我们看下app.json提供的另一个配置项:tabBar tabBar提供一些公有的属性对tab配置: 而针对每一个单独的tab 也有一些属性进行配置: 官方示意图: 具体实现底部Tab

  • 微信小程序项目实践之九宫格实现及item跳转功能

    效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间.  具体实现: 1.首先添加图片资源文件    在项目根目录新建一个目录,取名为images , 用于存放图片资源,然后添加进入几张图片 2.在home目录下的home.js 文件中(参照前两篇小程序实践文章) 进行数据源的配置 数据源为一个数组,每个数组元素为一个对象,该对象包含name(item文字),img(item示意图),url(点击该item跳转目录) 3.依据列表渲染的知识点进行home.wxml的编程   

  • 微信小程序实现手机获取验证码倒计时60s

    微信小程序实现手机获取验证码倒计时60s

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

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

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

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

  • 微信小程序之发送短信倒计时功能

    微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

  • 微信小程序的注册页面包含倒计时验证码、获取用户信息

    1.页面展示 2.wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id="telphone" maxlength='11'

  • 微信小程序实现获取手机号60s倒计时

    本文实例为大家分享了微信小程序实现获取手机号60s倒计时的具体代码,供大家参考,具体内容如下 1.效果:点击获取>60s倒计时>重新获取 2.wxml <view class="cu-form-group" style="border-top: 1rpx solid #eee;">       <view class="title">手机号</view>       <input name='

  • 基于mpvue搭建微信小程序项目框架的教程详解

    简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发 前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用

  • 微信小程序实现日期格式化和倒计时

    本文实例为大家分享了微信小程序实现日期格式化和倒计时的具体代码,供大家参考,具体内容如下 首先看看日期怎么格式化 第一种: Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+&q

随机推荐