欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序实践(八):验证码倒计时功能

程序员文章站 2022-03-23 08:42:19
效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字 首先js文件的data里面 声明一个变量用于表示当前是否可以点击,codeIsCanClick = true, 默认是可以点击的 写下界面代码: wxml文件中 对应样式 wxss文件: 以上构成页面静态效果。 注意button有 ......

 

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

 

小程序实践(八):验证码倒计时功能

 

  首先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)
  },

 

 

 

 

 

--------------------------------------------------------------------------------------