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

最新推荐文章于 2024-07-20 21:16:51 发布

yjj20007665

最新推荐文章于 2024-07-20 21:16:51 发布

阅读量1.4k

点赞数

文章标签： jquery javascript

[导读] 今天要开发一个功能就是当用户点击获取验证码之后我们会发送一条信息到用户手机，然后就会出现一个倒计时按钮，很像支付宝手机付款效果了，下面我给大家分享两个js效果。js代码代码如下复制代码 <di

今天要开发一个功能就是当用户点击获取验证码之后我们会发送一条信息到用户手机，然后就会出现一个倒计时按钮，很像支付宝手机付款效果了，下面我给大家分享两个js效果。

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").οnclick=function(){time(this);}
</script>
</div>

jquery

代码如下	复制代码
<li><span class="txt_name">验证码：</span><span class="code" οnclick="getVerify();" id="timeb1" style="cursor:pointer">免费获取验证码</span><input class="input_code" autocomplete="off" οnblur="if(this.value=='') this.value='';" οnfοcus="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);

}