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


Posted in Javascript onJuly 18, 2018

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

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

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

总结

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

Javascript 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
深入理解js中this的用法
May 28 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
微信小程序日期选择器实例代码
Jul 18 #Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 #Javascript
Angularjs实现多图片上传预览功能
Jul 18 #Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 #Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 #Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 #Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 #Javascript
You might like
用在PHP里的JS打印函数
2006/10/09 PHP
php session 预定义数组
2009/03/16 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
PHP发送短信代码分享
2015/08/11 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
法制宣传教育方案
2014/05/09 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
环保小标语
2014/06/13 职场文书
学雷锋宣传标语
2014/06/25 职场文书
意向书范本
2014/07/29 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书