• 技术文章 >web前端 >js教程

    JavaScript怎么实现验证码倒计时

    藏色散人藏色散人2021-07-03 09:35:35原创320

    JavaScript实现验证码倒计时的方法:首先创建一个HTML示例文件;然后创建一个button;最后通过“$('.hmac').on('click',function(){...}”方法获取验证码并实现倒计时60秒即可。

    本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    JavaScript怎么实现验证码倒计时?

    js获取验证码倒计时60s(超简单)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>测试jquey的ajax方法</title>
        <style>
            *{
                padding:0;
                margin:0;
            }
            button{width: 20%;line-height: 50px;font-size: 30px;margin-left: 40%;margin-top: 20%;  }
        </style>
    </head>
    <body>
    <div id="test"></div>
    <button>获取验证码</button>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script>
    $('.hmac').on('click',function(){
       var that = $(this)
        var timeo = 60;
        var timeStop = setInterval(function(){
            timeo--;
            if (timeo>0) {
                that.text('重新发送' + timeo +'s');
                that.attr('disabled','disabled');//禁止点击
            }else{
                timeo = 60;//当减到0时赋值为60
                that.text('获取验证码'); 
                clearInterval(timeStop);//清除定时器
                that.removeAttr('disabled');//移除属性,可点击
            }
        },1000)
    })
    </script>
    </body>
    </html>

    推荐学习:《javascript高级教程

    以上就是JavaScript怎么实现验证码倒计时的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:JavaScript
    上一篇:javascript怎么实现二维码 下一篇:JavaScript如何制作下拉菜单
    大前端线上培训班

    相关文章推荐

    • javascript最后怎么表示• JavaScript是前端吗• javascript数组怎么删除项(元素)• Javascript的数据类型不包括什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网