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


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 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
php 函数中使用static的说明
2012/06/01 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
深入浅析Node.js单线程模型
2017/07/10 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
Python中的延迟绑定原理详解
2019/10/11 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
实习心得体会
2014/01/02 职场文书
带薪年假请假条
2014/02/04 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
三下乡个人总结
2015/03/04 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
郭明义观后感
2015/06/08 职场文书