精华内容
参与话题
问答
  • countdown 倒计时 获取验证码倒计时
  • 一般在获取验证码的时候,会有一个倒计时的效果,这个效果虽然和简单,但是在用的时候一时间想不起来,所以和大家做一分享
  • 主要为大家详细介绍了vue获取验证码倒计时组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了iOS获取验证码倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了Android获取验证码倒计时的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了Android实现获取验证码倒计时功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • // <ul class="ulist">// <li class="group">// <label class="label" for="phone">联系电话:</label>// <div class="controls">...input type="text" id="phone" cl...
        

    // <ul class="ulist">

    // <li class="group">

    // <label class="label" for="phone">联系电话:</label>

    // <div class="controls">

    // <input type="text" id="phone" class="txt">

    // </div>

    // </li>

    // <li class="group">

    // <label class="label" for="code">验证码:</label>

    // <div class="controls">

    // <input type="text" id="code" class="txt">

    // <button class="btn btn-small get-code" οnclick="getCode(this)" id="J_getCode">获取验证码</button>

    // <button class="btn btn-small reset-code" id="J_resetCode" style="display:none;"><span id="J_second">60</span>秒后重发</button>

    // </div>

    // </li>

    // </ul>

    // jQuery代码:



    /*获取验证码*/

    //var isPhone = 1;

    function getCode(e){

    checkPhone(); //验证手机号码

    if(isPhone){

    resetCode(); //倒计时

    get_code($('#phone').val());

    }else{

    $('#phone').focus();

    }

    }

    //验证手机号码

    function checkPhone(){

    var phone = $('#phone').val();

    var pattern = /^1[0-9]{10}$/;

    isPhone = 1;

    if(phone == '') {

    alert('请输入手机号码');

    isPhone = 0;

    return;

    }

    if(!pattern.test(phone)){

    alert('请输入正确的手机号码');

    isPhone = 0;

    return;

    }

    //edit_tel()

    }

    //倒计时

    function resetCode(){

    $('#J_getCode').hide();

    $('#J_second').html('50');

    $('#J_resetCode').show();

    var second = 50;

    var timer = null;

    timer = setInterval(function(){

    second -= 1;

    if(second >0 ){

    $('#J_second').html(second);

    }else{

    clearInterval(timer);

    $('#J_getCode').show();

    $('#J_resetCode').hide();

    }

    },1000);

    }

    // 获取验证码

    function get_code(e){

    $.ajax({

      url:'/wlcd/portal/Register/get_code',

      dataType:'json',

      type:'post',

      data:{'tel':e},

      success:function(data){

     

      }

    })

    }

    展开全文
  • 主要介绍了JS 实现获取验证码 倒计时功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 网站中为了防止恶意获取验证短信、验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果。实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码。实例效果和代码如下: <meta ...
  • 获取验证码倒计时

    2018-05-11 09:13:32
    获取验证码&lt;/button&gt;2、jqvar InterValObj; //timer变量,控制时间var count = 60; //间隔函数,1秒执行var curCount;//当前剩余秒数$('#sms').on('click',function(){ curCount = count; //设置...

    1、html

    <button id="sms">获取验证码</button>

    2、jq

    var InterValObj; //timer变量,控制时间
    var count = 60; //间隔函数,1秒执行
    var curCount;//当前剩余秒数
    $('#sms').on('click',function(){
    curCount = count;
    //设置button效果,开始计时
    $("#sms").attr("disabled", "disabled");
    $("#sms").addClass('disable');
    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
    });
    function SetRemainTime() {
    if (curCount == 0) {                
    window.clearInterval(InterValObj);//停止计时器
    $("#sms").removeAttr("disabled");//启用按钮
    $("#sms").removeClass('disable');
    $("#sms").text("重新获取");
    }else {
    curCount--;
    $("#sms").text("" + curCount + "s后获取");
    }
    }

    展开全文
  • 获取验证码 倒计时

    2018-11-29 16:25:12
    &lt;...请输入验证码" /&gt; &lt;button class='btn size-24' type="warn" disabled="{{disabled}}" bindtap="getCode"&gt;{{codeTxt}}&lt;
    <input name="sms_code" type='number' class='flex-1' placeholder="请输入验证码" />
    <button class='btn size-24' type="warn" disabled="{{disabled}}" bindtap="getCode">{{codeTxt}}</button>

     

    const app = getApp();
    
    Page({
      data: {
        disabled:false,
        codeTxt:"获取验证码",
        codeTime:61,
      },
    
      onLoad(options) {},
    
      /**
       * 点击发送验证码
       */
      getCode(){
        var self = this, pData = this.data, codeTime = pData.codeTime; 
    
        //调用获取验证码的接口,如果成功返回验证码{
    
            wx.showToast({
              title: '发送成功', icon: 'success', duration: 2000
            });
             self.setData({
                  disabled: true
            })
            
            //设置一分钟的倒计时
             var interval = setInterval(function () {
                  codeTime--;
                  self.setData({
                    codeTxt: codeTime + 's',
                  })
                  if (codeTime <= 0) {
                    clearInterval(interval)
                    self.setData({
                      codeTxt: '重新发送',
                      codeTime: 61,
                      disabled: false,
                    })
                  }
              }, 1000);
    
        }
        
        
      },
      
     
    })

     

    展开全文
  • 倒计时效果相信大家都不陌生,我们可以使用很多种方法去实现此效果,这里自己采用 CountDownTimer 定时器简单封装下此效果,方便我们随时...下面小编给大家分享android验证码倒计时封装方法,感兴趣的朋友一起看看吧
  • 主要为大家详细介绍了Android获取验证码显示的两种简单实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序验证码倒计时效果 如果写过js的倒计时,那么小程序中使用也是差不多的; 代码: data: { daojishi:60, inter:'' }, daojishi: function () { this.data.inter = setInterval((res) => { this....

    微信小程序验证码倒计时效果

    如果写过js的倒计时,那么小程序中使用也是差不多的;

    代码:

      data: {
      	daojishi:60,
    	inter:''
    	},
      daojishi: function () {
        this.data.inter = setInterval((res) => {
          this.fun();
        }, 1000);
      },
      fun: function () {
        let t = this.data.daojishi;
        t--;
        this.setData({
          daojishi: t
        })
        if (t <= 0) {
          // location.href = "https://www.baidu.com";
          clearInterval(this.data.inter);
          this.setData({
            isyanzhengma: true
          })
        }
      },
    

    手机登录、填手机号获取验证码 倒计时后重新获取效果

    描述:
    输入正确的手机号并且输入验证码后,手机登录按钮变为红色可点击状态;自动验证输入的手机号是否为合法手机号;点击获取动态码后开始60秒倒计时后才可以再次获取动态码;

    效果图:
    在这里插入图片描述
    代码:
    html:

    <view class="dltel">
      <view class="teltit">手机快捷登录</view>
      <view class="inpbox">
        <input placeholder="请输入手机号" class="inpbtn" type='number' maxlength="11" value="{{mobile}}" bindinput='blurPhone' />
        <text class="dongtaima {{hui?'hui':'red'}}" wx:if="{{isyanzhengma}}" bindtap="dongtaima">获取动态码</text>
        <text class="dongtaima" wx:else>重发({{daojishi}})</text>
      </view>
      <view class="inpbox">
        <input placeholder="请输入验证码" value="{{code}}" maxlength="6" class="inpbtn" bindinput="codetap"  />
      </view>
    
      <view class="teldl {{dlno ? 'tou50':''}}" bindtap="teldltap">
        <text class="icontxt">手机登录</text>
      </view>
    </view>
    

    js:

    // pages/dltel/dltel.js
    
    
    import {
      sendCode,
      mobileLogin
    } from "../../utils/requst/api.js";
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        navbarData: {
          isfixed: false,
          iswhite: false, //icon color
          showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
          title: '登录', //导航栏 中间的标题
          backgroundcolor: '#fff',
          isintercept: false //返回拦截
        },
    
        mobile: '',
        code: '',
        isyanzhengma: true,
        hui: true,
        dlno: true,
        daojishi: 60,
        teltrue: false,
        inter: '',
      },
      // 手机号验证
      blurPhone: function (e) {
        this.setData({
          mobile: e.detail.value
        })
        let phone = this.data.mobile;
        if (!(/^1[34578]\d{9}$/.test(phone))) {
          this.setData({
            teltrue: false,
            hui: true,
          })
          if (phone.length >= 11) {
            wx.showToast({
              title: '手机号有误',
              icon: 'none',
              duration: 2000
            })
          }
        } else {
          this.setData({
            teltrue: true,
            hui: false,
          })
          console.log('验证成功', this.data.teltrue)
        }
      },
      dongtaima: function (e) {
        if (this.data.teltrue & !this.data.hui) {
          let params = {
            mobile: this.data.mobile
          }
          sendCode(params).then((res) => {
            console.log(res);
            if (res.data.msg == '发送成功!') {
              wx.showToast({
                title: res.data.msg,
                icon: "none",
                duration: 2000
              })
              this.setData({
                isyanzhengma: false
              })
              this.daojishi();
            } else {
              wx.showToast({
                title: "发送失败,请重发!",
                icon: "none",
                duration: 2000
              })
            }
          })
        } else if (!this.data.teltrue) {
          wx.showToast({
            title: "请填写正确的手机号!",
            icon: "none",
            duration: 2000
          })
        }
      },
      codetap: function (e) {
        // console.log(e);
        this.setData({
          code: e.detail.value
        })
        if (this.data.teltrue & this.data.code != '') {
          this.setData({
            dlno: false
          })
        }
      },
      daojishi: function () {
        this.data.inter = setInterval((res) => {
          this.fun();
        }, 1000);
      },
      fun: function () {
        let t = this.data.daojishi;
        t--;
        this.setData({
          daojishi: t
        })
        if (t <= 0) {
          // location.href = "https://www.baidu.com";
          clearInterval(this.data.inter);
          this.setData({
            isyanzhengma: true
          })
        }
      },
    
      teldltap: function () {
        let params = {
          code: this.data.code,
          mobile: this.data.mobile
        }
        if (this.data.teltrue & this.data.code != '') {
          mobileLogin(params).then((res) => {
            // console.log(params);
            // console.log(res);
            if (res.data.message == "ok") { //登录成功 修改参数
              //getApp().globalData.token = res.data.data.token;
              //getApp().globalData.type = res.data.data.type;
              //getApp().globalData.telnum = res.data.data.mobile;
              //wx.setStorageSync('token', res.data.data.token);
              //wx.setStorageSync('type', res.data.data.type);
              //wx.setStorageSync('telnum', res.data.data.mobile);
    
              //let pages = getCurrentPages(); // 当前页的数据,
              //let prevPage = pages[pages.length - 3]; // 上上页的数据
              //console.log(pages);
              //prevPage.setData({
                //token: res.data.data.token,
                //type: res.data.data.type,
                //telnum: res.data.data.mobile
              //})
              //wx.navigateBack({
                //delta: 2
              //})
            } else {
              wx.showToast({
                title: res.data.msg, // 未成功原因
                icon: "none",
                duration: 2000
              })
            }
          })
        } else if (!this.data.teltrue) {
          wx.showToast({
            title: "请填写正确的手机号!",
            icon: "none",
            duration: 2000
          })
        } else {
          wx.showToast({
            title: "请填写验证码!",
            icon: "none",
            duration: 2000
          })
        }
    
      },
      
    })
    

    css:(less)

    @fontcolor:#353535;
    @red:#ff2b0a;
    .dltel{ 
      position: relative;
      width: 100%;
      height: 100vh;
      padding:0 40rpx;
      box-sizing: border-box;
      .teltit{
        font-size: 50rpx;
        color: @fontcolor;
        line-height: 90rpx;
        margin-top: 35rpx;
        margin-left: 20rpx;
      }
      .inpbox{
        position: relative;
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 28rpx;
        color: @fontcolor;
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #eee;
        .dongtaima{
          
        }
        .inpbtn{
          width: 430rpx;
          height: 100%;
          margin:0 30rpx;
        }
        .hui{
          color: #888
        }
        .red{
          color: @red;
        }
      }
      .teldl{
        position: relative;
        width: 100%;
        height: 94rpx;
        border-radius: 15rpx;
        line-height: 94rpx;
        text-align: center;
        font-size: 36rpx;
        margin-top:60rpx;
        color: #fff;
        background: @red;
      }
      .tou50{
        background:#ff9584;
      }
    }
    
    展开全文

空空如也

1 2 3 4 5 ... 20
收藏数 2,752
精华内容 1,100
关键字:

获取验证码倒计时