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

微信(小程序)  /  管理员 发布于 5年前   304

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

wxml文件

 
        {{getmsg}}    下一步 

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;}

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序之发送短信倒计时功能
• 微信小程序 倒计时组件实现代码
• 微信小程序动态显示项目倒计时效果
• 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
• 微信小程序实现倒计时60s获取验证码
• 微信小程序倒计时功能实现代码
• 微信小程序倒计时功能实例代码
• 微信小程序实现团购或秒杀批量倒计时
• 微信小程序电商常用倒计时实现实例