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


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 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
微信小程序简单的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
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
ThinkPHP分页实例
2014/10/15 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
售后服务承诺书范文
2014/03/26 职场文书
党风廉设责任书
2014/04/16 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书