短信验证的60秒

.verification{
      width: 100%;
      padding: 0 3%;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .verification .call{
      width: 25%;
      font-size: 14px;
      color: #231815;
      line-height: 50px;
      letter-spacing: 2px;
    }
    .verification .obtain{
      height: 20px;
      margin-top: 15px;
      width: 26%;
      text-align: center;
      font-size: 12px;
      /*letter-spacing: 2px;*/
      color: #ffffff;
      line-height: 20px;
      border-radius: 4px;
      background:linear-gradient(to right,#f3c71d,#f29617);
    }
     .verification input{
       padding-left: 10px;
       width: 49%;
       font-size: 12px;
     }

     .next{
       width: 96%;
       height: 40px;
       margin: 0 2%;
       background-color: #d9d8d8;
       text-align: center;
       line-height: 40px;
       border-radius: 6px;
     }
      .textcode{
      height: 20px;
      width: 26%;
      font-size: 12px;
      color: #000000;
      margin-top: 15px;
      display: none;
    }
<div class="verification">
    <div class="call">验证号码</div>
    <input type="text" id="code" placeholder="请输入验证号码">
    <div class="obtain" onclick="getcode(this)">获取验证码</div>
    <p class="textcode"></p>
</div>
//获取验证码
    function getcode(that){
      var phone=$api.byId('phone').value;
      var reg=/(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if(phone==''){
        api.toast({
            msg: '请输入手机号码',
            duration: 1500,
            location: 'middle'
        });
      }else if(!reg.test(phone)){
        api.toast({
            msg: '手机号输入有误',
            duration: 1500,
            location: 'middle'
        });
      }else{
        api.ajax({
            url: domain_name +'/index/liveroom/note',
            dataType: 'json',
            method: 'post',
            headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
            data: {
                body: {
                    mobile: phone,
                }
            }
        }, function (ret, err) {
              var num=60
              if(ret.code==1){
                  $(that).hide()
                  $(that).next().text('60s后重新获取')
                  $(that).next().show()
                  $('#code').focus()
              var time=setInterval(function(){
                    num-=1
                    $(that).next().text(num+'s后重新获取')
                    if(!num){
                        clearInterval(time)
                        num=60;
                        $(that).text('重新获取')
                        $(that).show()
                        $(that).next().hide()
                        $(that).next().text(num+'s后重新获取')
                      }
                  },1000);
                }
        })
      }
    }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值