小程序实践（八）：验证码倒计时功能
效果如下：点击发送验证码按钮，按钮背景变色，不可点击，显示倒计时文字
首先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)
},--------------------------------------------------------------------------------------
小程序实践（一）：主页tab选项实现
小程序实践（二）：swiper组件实现轮播图效果
小程序实践（三）：九宫格实现及item跳转
小程序实践（四）：动态控制组件的显示/隐藏
小程序实践（五）：for循环绑定item的点击事件
小程序实践（六）：view内部组件排版
小程序实践（七）：页面间传值
小程序实践（八）：验证码倒计时功能
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-07-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
腾讯云开发者
