js/jquery实现免费获取手机验证码倒计时效果

js代码

 代码如下 复制代码

<div class="input">
    <input type="button" id="btn" class="btn_mfyzm" value="免费获取验证码" />
   <script type="text/javascript">
var wait=5;
document.getElementById("btn").disabled = false;  
function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");          
            o.value="免费获取验证码";
            wait = 5;
        } else {
            o.setAttribute("disabled", true);
            o.value="重新发送(" + wait + ")";
            wait--;
            setTimeout(function() {
                time(o)
            },
            1000)
        }
    }
document.getElementById("btn").onclick=function(){time(this);}
</script>
</div> 

jquery

 代码如下 复制代码

 <li><span class="txt_name">验证码：</span><span class="code"  onclick="getVerify();" id="timeb1" style="cursor:pointer">免费获取验证码</span><input class="input_code" autocomplete="off" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" value="" type="text"  name="verifyCode"  id="verifyCode" ></li>

js代码

 代码如下 复制代码

function f_timeout(){
 
 $('#timeb1').html('<span id="timeb2">60</span>秒后重新获取');
 $('#timeb1').click(function(){});
 timer = self.setInterval(addsec,1000);

}

function addsec(){
 
 var t = $('#timeb2').html();
 //alert(t);
 if(t > 0){
  
  $('#timeb2').html(t-1);
  //alert(t);
 }else{
  
  window.clearInterval(timer);
  $('#timeb1').html('<span id="timeb2"></span>重新获取验证码');
  $('#timeb1').click(function(){getVerify();});
 }
 
}
时间： 2024-08-02 18:36:22

js/jquery实现免费获取手机验证码倒计时效果的相关文章

JS/jQ实现免费获取手机验证码倒计时效果_javascript技巧

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

jQuery实现的手机发送验证码倒计时效果代码分享_jquery

这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果: 首先检测手机是否符合1开头,11位数字的格式: 若不符合,则提示错误信息并返回false: 否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: --------------------------------效果演示

js实现点击获取验证码倒计时效果_javascript技巧

网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

JS实现的仿淘宝交易倒计时效果_javascript技巧

本文实例讲述了JS实现的仿淘宝交易倒计时效果.分享给大家供大家参考,具体如下: <script type="text/javascript"> var StartTime = new Date("2015/11/11 12:34:03"); document.write("订购时间: " + StartTime.toLocaleDateString() + StartTime.toLocaleTimeString() + "

Android自定义View获取注册验证码倒计时按钮_Android

在Android开发中,我们不可避免的会做到注册功能,而现在的注册大多数都是用手机去注册的,那么注册的时候都会要求用获取验证码的方式去验证,我们接下来就来实战一下自定义获取验证码倒计时按钮: 1.先看效果图 2.我们涉及到的变量 //倒计时时长,可设置 /** * 倒计时时长,默认倒计时时间60秒: */ private long length = 60 * 1000; //在点击按钮之前按钮所显示的文字 /** * 在点击按钮之前按钮所显示的文字,默认是获取验证码 */ private Str

iOS获取验证码倒计时效果_IOS

本文实例为大家分享了iOS倒计时获取验证码的具体代码,供大家参考,具体内容如下 1. 倒计时发送验证码,界面跳转计时会重置 /**重新发送短信的计时*/ -(void)fireTimer{ __block int timeout=180; //倒计时时间 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); dispatch_source_t _timer = dispatc

Android账号注册实现点击获取验证码倒计时效果_Android

网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果,如何实现这个效果,具体内容如下 效果图:   代码: RegisterActivity.java import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.Button; import com.jialianjia.bzw.BaseAct

Andorid实现点击获取验证码倒计时效果_Android

我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取,为了方便以后使用,这里做个记录,讲讲倒计时器的实现.  1.先进行倒计时工具类的封装  public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param textView The TextView * * * @param millisInFuture The number of m

Android自定义View获取注册验证码倒计时按钮

在Android开发中,我们不可避免的会做到注册功能,而现在的注册大多数都是用手机去注册的,那么注册的时候都会要求用获取验证码的方式去验证,我们接下来就来实战一下自定义获取验证码倒计时按钮: 1.先看效果图 2.我们涉及到的变量 //倒计时时长,可设置 /** * 倒计时时长,默认倒计时时间60秒: */ private long length = 60 * 1000; //在点击按钮之前按钮所显示的文字 /** * 在点击按钮之前按钮所显示的文字,默认是获取验证码 */ private Str