1. Home
  2. HTML
  3. 验证码倒计时函数

验证码倒计时函数

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

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

<!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;
$('.send_verify').on('click',function(){
    setTime($(this));
})

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

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

本文为冯奎原创文章，转载无需和我联系，但请注明来自冯奎博客fengkui.net

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