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


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 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 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
php二维数组用键名分组相加实例函数
2013/11/06 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
详解js中==与===的区别
2017/01/08 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
jupyter notebook参数化运行python方式
2020/04/10 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
超市营业员求职简历的自我评价
2013/10/17 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
2016年党建工作简报
2015/11/26 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android