前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js验证码倒计时

js验证码倒计时

作者头像
IT架构圈
发布2018-05-31 15:57:46
6.6K0
发布2018-05-31 15:57:46
举报
文章被收录于专栏:IT架构圈
代码语言:javascript
复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>无标题文档</title>  
    <script src="js/jquery-1.7.2.js"></script>  
    <script type="text/jscript">  
        var times =10;                      //获取验证码间隔时间  
        /*  
         * 一段时间后显示重新获取验证码  
         */  
        function verificationShow(){  
            timestimes =times-1;  
            var str1="重新获取(" + times +"s)";  
            $("#spanVerification").html("<input type='button' style='border-radius: 30px;width: 180px;height: 70px;font-size: 26px;line-height: normal; border: 2px solid rgba(79, 70, 212, 0.15); color: rgba(52, 52, 206, 0.15); background-color: #FFFFFF;' value="+str1+">");  
            if(times > 0){  
                setTimeout(verificationShow , 1000);  
            }else{  
                times =10;  
                $("#spanVerification").html("<input type='button' style='border-radius: 30px;width: 180px;height: 70px;font-size: 26px;line-height: normal;border: 2px solid #4f46d4; background-color: #FFFFFF; color: #3434ce;' value='获取验证码' onclick='generateVerification();'/>");  
            }  
        }  
        /**  
         * 获取验证码  
         */  
        function generateVerification(){  
            var mobile = $("#mobile").val();  
            if(mobile == ""){  
                alert("手机号码不能为空。");  
                return;  
            }   
            //验证码间隔时间  
            verificationShow();  
            $.ajax({  
                type:"post",  
                url:"<%=path%>/public/getVerificationCode",  
                data:{"mobile":mobile},  
                success:function(data) {  
                    if(data.respCode=="0000"){  
                        alert(data.verification);  
                    }else{  
                        layer.open({content: data.respDesc,btn: '确定'});  
                    }  
                },  
                error:function(data){  
                }  
            });  
        }  
    </script>  
</head>  
<body>  
    <div >  
        <span>手机号码</span><input class="ys_" type="text" name="mobile" id="mobile" placeholder="请输入手机号"/>  
    </div>  
    <div>  
        <span>验证码&nbsp;&nbsp;&nbsp;</span><input class="ys_" name="verificationCode" id="verificationCode" type="text" maxlength="4" placeholder="请输入验证码"/>  
        <span id="spanVerification"><input type="button" style="border-radius: 30px;width: 180px;height: 70px;font-size: 26px;line-height: normal;border: 2px solid #4f46d4;color: bule;background-color: #FFFFFF; color: #3434ce;" value="获取验证码" onclick="generateVerification();"/> </span>  
    </div>  
</body>  
</html>  
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-03-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程坑太多 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档