微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

微信小程序+WEB使用JS实现注册【60s】倒计时功能开发步骤：

---

1.wxml页面代码：

绑定手机
"bindMobile">
class="form_group">
    手 机：
    "number" placeholder="请输入手机号" maxlength="11" name="data_phone" value="" auto-focus="true" bindblur="blur_mobile" />
    "button" class="{{is_show?'show':'hide'}}" bindtap="clickVerify">获取验证码
    "button" class="{{is_show?'hide':'show'}}">重新发送{{last_time}}秒
  
 
"number" placeholder="请输入验证码" maxlength="6" name="data_verify" value=""/>
class="save_btn" form-type="submit">确认绑定

2. js页面代码：

var countdown = 60;
var settime = function (that) {
 if (countdown == 0) {
  that.setData({
   is_show: true
  })
  countdown = 60;
  return;
 } else {
  that.setData({
   is_show:false,
   last_time:countdown
  })
 
  countdown--;
 }
 setTimeout(function () {
  settime(that)
 }
  , 1000)
}
 
Page({
 /**
  * 页面的初始数据
  */
 data: {
  last_time:'',
  is_show:true
 },
 
 clickVerify:function(){
  var that = this;
 // 将获取验证码按钮隐藏60s，60s后再次显示
   that.setData({
    is_show: (!that.data.is_show)  //false
   })
   settime(that);
 }
 
 
})

3 .wxss页面代码：

/* 发送验证码按钮隐藏，并展示倒数60s提示 */
.hide{
 display: none;
}
.show{
 display: block;
}

 

上面讲的是微信小程序的，那么我们一般web端或者移动端的应该是什么样呢？

其实，方法都差不多，这里也贴出来仅供大家参考

 
"button" id="btn" value="免费获取验证码" οnclick="settime(this)" /> 

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

转载于:https://www.cnblogs.com/gavinjay/p/8535166.html