小程序中短信登录倒计时

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

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

• 效果图