验证码倒计时函数

在我们写登录注册的时候,
经常使用手机号获取验证码登录注册,
这是我们就需要一个倒计时,
来限制用户获取验证码的次数,

有一个好用的验证码倒计时函数,
记录下来,便于自己以后使用,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
    <div>
        <button type="button" class="btn btn-default send_verify">这是按钮</button>
    </div>
</body>
<script type="text/javascript">
var countTime = 120;
$(function(){
    $('.send_verify').on('click',function(){
        setTime();
    })
})

// 倒计时
function setTime(){
    $(".send_verify").attr("disabled",true).css({
        backgroundColor: "#ddd"
    }).text("120s");
    timer = setInterval(function(){
        countTime--;
        if(countTime >0){
            $(".send_verify").text(countTime+"s");
        }else {
            $(".send_verify").attr("disabled",false).css({
                backgroundColor: "#156FDE"
            }).text("发送验证码");
            countTime = 120;
            clearInterval(timer);
            timer = null;
        }
    },1000);
}
</script>
</html>

如果需要刷新页面,而倒计时不重新开始;
那么可以结合Cookie或localstage来使用。

冯奎博客
请先登录后发表评论
  • latest comments
  • 总共0条评论