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

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

  首先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内部组件排版

小程序实践(七):页面间传值

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

响应式媒体查询media的用法

        media媒体查询响应式可以实现什么效果?对于不同尺寸的设备相应不同的样式,但是不能兼容移动和pc端的全响应兼容.

13120
来自专栏郭耀华‘s Blog

android 小知识点

1、 最近翻看以前的项目时候,想更改下布局文件,谁知道就改了个参数就提示如下的报错,百思不得其解,原来是这样解决的。小记一下。 更改layout的xml之后...

28760
来自专栏听雨堂

为服务器控件加入客户端事件处理的几种方法

    服务器端的处理虽然方便,但因为每次都要PostBack,因而效率不高,很多时候需要为服务器端控件写入客户端事件处理。把各种方法总结一下:     1)在...

20180
来自专栏Python研发

购物时添加数量

9710
来自专栏编程微刊

网页里如何使用js屏蔽鼠标右击事件

在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只...

57230
来自专栏听雨堂

asp.net中几种页面元素的比较

学习ASP.NET也快三个月了,今天才对页面中几种不同元素区分开,惭愧! 1)HTML元素:跟普通的网页中的标签所定义的一样,没有服务器端的事件响应,能够直接...

204100
来自专栏python学习之旅

Python+Selenium笔记(七):WebDriver和WebElement

(一)  WebDriver WebDriver提供许多用来与浏览器交互的功能和设置,通过WebDriver的功能和一些方法,来实现与浏览器窗口、警告、框架和弹...

35250
来自专栏微信小开发

微信小程序开发-常见问题

知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS2、inp...

27690
来自专栏Web 开发

iOS自定义键盘搜索键

之前知道HTML5的input属性,新增了一种type=search。当系统焦点在input[type=search]元素上时,iOS会自动更改键盘的确认按键为...

16300
来自专栏懒人开发

Bootstrap学习(1.1)A:navbar导航简单理解

因为自己前端不熟悉,特别是Bootstrap,也只是学习阶段 自己调试,简单记录一些过程

17440

扫码关注云+社区

领取腾讯云代金券