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


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 相关文章推荐
不同浏览器的怪癖小结
Jul 11 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 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
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
Javascript Math对象
2009/08/13 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
详细分析Node.js 模块系统
2020/06/28 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
商得四方公司面试题(gid+)
2014/04/30 面试题
财务管理个人自荐书范文
2013/11/24 职场文书
求职信写作要突出重点
2014/01/01 职场文书
第二课堂活动总结
2014/05/07 职场文书
会计工作总结范文2014
2014/12/23 职场文书
职工年度考核评语
2014/12/31 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python