首页 > 微信 > 详细

小程序短信验证码倒计时样式

时间:2020-07-06 18:03:11      阅读:64      评论:0      收藏:0      [点我收藏+]

连续点击不影响

wxml

<view class="lia sa">
      <view class="name">验证码</view>
      <input class="inp"></input>
      <view class="huoqu" bindtap="{{flag}}" style="background:{{bg}}">{{yzm}}</view>
</view>

wxss

.lia{
      height:82rpx;
      width:80%;
      margin-left:10%;
}
.lia .name{
      height:82rpx;
      line-height:82rpx;
      font-size:28rpx;
      color:#000000;
      width:25%;
      text-align: center;
      float: left;
}
.lia .phone{
      height:82rpx;
      width:74%;
      text-align: center;
      border:3rpx solid #CCCCCC;
      float: left;
}
.lia .inp{
      height:78rpx;
      width:45%;
      float: left;
      border:3rpx solid #CCCCCC;
      text-align: center;
}
.lia .huoqu{
      height:100%;
      width:29%;
      float: right;
      line-height:82rpx;
      text-align: center;
      color:#fff;
      font-size: 24rpx;
}

wx.js

data: {
            bg:‘#E02020‘,
            time : 10,
            yzm:‘获取验证码‘,
            second:‘10‘,
            flag:‘huoqu‘
      },
      // 获取验证码
      huoqu:function(){
            var that = this;
            if (that.data.time == 0){
                  that.setData({
                        yzm:‘重新发送‘,
                        flag:‘huoqu‘,
                        bg:‘#E02020‘,
                        time:‘10‘,
                  })
            }else{
                  that.setData({
                        yzm: that.data.time-- + ‘s后重新获取‘,
                        flag:‘‘,
                        bg:‘#ccc‘,
                  })
                  setTimeout(function () {
                        that.huoqu()
                  }, 1000)
            }
      },

 

小程序短信验证码倒计时样式

原文:https://www.cnblogs.com/xiaoyaolang/p/13256072.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!