小程序实现短信登录倒计时


Posted in Javascript onJuly 12, 2019

在平时的短信登录中,当发送短信验证码后会显示倒计时,那么这个倒计时如何实现呢?

wxml文件

<view class='Form'>
 <form bindsubmit="formSubmit" bindreset="formReset" class='forms'>
  <view class="fidpas">
  <input type="number" class="phonenumber" placeholder="请输入手机号" name="phonenumber" />
  <input type="number" class="message" placeholder="请输入短信验证码" name="msg" />
  <button class="{{sendmsg}}" bindtap="sendmessg" class='btn'>{{getmsg}}</button>
  </view>
  <button class="lgbut" formType="submit" type='warn'>下一步</button>
 </form>
</view>

js文件

let timeId = null;
Page({
 data: {
 sendmsg: "sendmsg",
 getmsg: "获取短信验证码",
 },
 sendmessg: function (e) {
 var timer=1;
 if (timer == 1) {
  timer = 0
  var that = this
  var time = 60
  that.setData({
  sendmsg: "sendmsgafter",
  })
  var inter = setInterval(function () {
  that.setData({
   getmsg: time + "s后重新发送",
  })
  time --
  if (time < 0) {
   timer = 1
   clearInterval(inter)
   that.setData({
   sendmsg: "sendmsg",
   getmsg: "获取短信验证码",
   })
  }
  }, 1000)
 }
 }, 
 })

wxss文件

.Form{
 margin-top: 80px;
}
.forms input{
 padding: 10px ;
}
.phonenumber{
 border-bottom: 1px solid #ccc;}
.message{
 display: inline-block
}
.btn{
 display: inline-block;
 font-size: 14px;
}
.forms button{
 margin-top: 15px;
}

效果图

小程序实现短信登录倒计时

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
js验证账户名是否重复
May 26 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 #Javascript
小程序实现分类页
Jul 12 #Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
小程序实现搜索框
Jun 19 #Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 #Javascript
vue cli安装使用less的教程详解
Jul 12 #Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
js继承实现方法详解
2016/12/16 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
vue filters的使用详解
2018/06/11 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python获取央视节目单的实现代码
2015/07/25 Python
python中正则的使用指南
2016/12/04 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
python实现学员管理系统
2019/02/26 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
有关九一八事变的演讲稿
2014/09/14 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
2014年质检工作总结
2014/11/26 职场文书
Python实现简繁体转换
2021/06/07 Python
nginx 配置指令之location使用详解
2022/05/25 Servers