效果图

wxml

<input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' password focus bindconfirm='getPwd'/>
<input class='input-tel' type='number' placeholder="手机号" placeholder-style='color: #000' maxlength='11 confirm-type='done' />
<input class='input-verify' type='number' placeholder-style='color: #000' placeholder='手机验证码'></input>
<button class='verify-btn' disabled='{{disabled}}' bindtap="getVerificationCode">{{time}}</button> <button class='confirm-btn' bindtap='confirm_btn'>确认修改</button>

wxss

/* pages/forgetpwd/forgetpwd.wxss */
input{
padding-left: 20rpx;
border-bottom: 1rpx solid #ccc;
height: 80rpx;
line-height: 80rpx;
width: 95%;
margin: 0 auto;
font-size: 28rpx;
}
.input-verify{
width: 67%;
margin-left: 10rpx;
float: left;
}
.verify-btn{
width: 26%;
height: 65rpx;
float: right;
line-height: 65rpx;
background: #fff;
color: #5FD79D;
margin: 20rpx 10rpx;
font-size: 28rpx;
}
.confirm-btn{
width: 80%;
height: 90rpx;
margin: 150rpx auto;
background: #5FD79D;
color: #fff;
}

js

// pages/forgetpwd/forgetpwd.js
var interval = null //倒计时函数
Page({ /**
* 页面的初始数据
*/
data: {
time: '获取验证码', //倒计时
currentTime: 60
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, getPwd:function(e){
console.log(e.detail.value)
}, /**
* 确认修改
*/
confirm_btn:function(){
wx.redirectTo({
url: '/pages/login/login',
})
}, getCode: function (options){
var that = this;
var currentTime = that.data.currentTime
interval = setInterval(function () {
currentTime--;
that.setData({
time: currentTime+'秒'
})
if (currentTime <= 0) {
clearInterval(interval)
that.setData({
time: '重新发送',
currentTime:60,
disabled: false
})
}
}, 1000)
},
getVerificationCode(){
this.getCode();
var that = this
that.setData({
disabled:true
})
},
})

微信小程序实现验证码倒计时效果的更多相关文章

  1. 微信小程序动态显示项目倒计时效果

    效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...

  2. 微信小程序获取验证码倒计时

    getVerificationCode: function() { var that = this; var currentTime = that.data.currentTime; that.set ...

  3. 微信小程序60秒倒计时

    微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...

  4. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  5. 微信小程序-滚动消息通知效果

    这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...

  6. 微信小程序实现滑动删除效果

    在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...

  7. 微信小程序发送验证码功能,验证码倒计时

    data{ timer:'', countDownNum:'发送验证码', } // 点击验证码倒计时获取验证码 Gain:function(e){ let that = this let count ...

  8. 微信小程序实现淡入淡出效果(页面跳转)

    //目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写  <!--wxml--><!--蒙版(渐出淡去效果)--><view class=" ...

  9. 微信小程序-----自定义验证码实现

    这一段时间做小程序项目,使用的是mpvue的框架,需要自己实现验证码输入,模拟input的光标,上一个框输入后后一个框自动获取焦点,删除时从后往前依次删除.下图是整体效果: <template& ...

随机推荐

  1. 在Ubuntu登陆界面输入密码之后,黑屏一闪后,又跳转到登录界面

    现象:在Ubuntu登陆界面输入密码之后,黑屏一闪后,又跳转到登录界面.原因:主目录下的.Xauthority文件拥有者变成了root,从而以用户登陆的时候无法都取.Xauthority文件.说明:X ...

  2. Transport Layer Protocols

    1 End-to-end Protocols(端到端协议) 传输层协议往往是主机对主机(host-to-host)或者说是端到端(end-to-end).通常希望传输层协议可以提供如下service: ...

  3. WebRTC 学习之 概念总结

    在学习WebRTC的时候,接触到了好多新的概念,在这里做一下备忘吧 RTMP协议 Real Time Messaging Protocol(实时消息传输协议).该协议基于TCP,是一个协议族,包括RT ...

  4. ElasticSearch5.0之后的改变

    ES5的变化 search_type=count和scan都移除了 count可以用size=0代替 GET /my_index/_search { "size": 0, &quo ...

  5. OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 6.在计算节点上安装并配置计算服务Nova

    安装和配置计算节点这个章节描述如何在计算节点上安装和配置计算服务. 计算服务支持几种不同的 hypervisors.为了简单起见,这个配置在计算节点上使用 :KVM <kernel-based ...

  6. 【LeetCode】13. 罗马数字转整数

    题目 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为 ...

  7. DevExpress GridView自动滚动

    引言 最新有一个winform项目使用的是DevExpress的控件,所以最近都在摸索使用这套控件,实在是佩服整套控件的强大,同时代码写起来也简洁.客户有一个需求,希望报表结果能在外接的大屏幕上定时滚 ...

  8. (转)Linux开启路由转发功能

    原文:https://www.linuxidc.com/Linux/2016-12/138661.htm 标记一下,今天想让一台Red Hat Enterprise Linux 7开通iptables ...

  9. Beautiful Soup的用法

    BEAUTIFUL SOUP的介绍 就是一个非常好用.漂亮.牛逼的第三方库,是用Python写的一个HTML/XML的解析器,它可以很好的处理不规范标记并生成剖析树(parse tree). 它提供简 ...

  10. 调试工具Chisel-LLDB插件

    Chisel-LLDB命令插件 相信每个人或多或少都在用LLDB来调试,比如po一个对象.LLDB的是非常强大的,且有内建的,完整的 Python 支持.今天我们主要介绍一个 facebook 开源的 ...