js验证码倒计时

<!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>  

原文发布于微信公众号 - 编程坑太多(idig88)

原文发表时间:2018-03-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动端周边技术扩展

python收发邮件客户端

2693
来自专栏Flutter&Dart

DartVM服务器开发(第二十天)--jaguar配置HTTPS

我们可以在项目里面的bin文件夹下面创建一个文件夹叫做ssl 分别将上面生成的秘钥跟证书放到这个文件夹下面

1091
来自专栏向治洪

charles抓取https请求包

说明: 用charles抓取https请求,会出现SSL Proxying disabled in Proxy Settings这样的提示,如下图。要通过cha...

3027
来自专栏FreeBuf

什么是SSL预证书?

预验证是用作证书透明度(CT)一部分的特殊类型的SSL证书。 预先证书与常规SSL证书不同,因为它们不是(也不可以)用于验证服务器或形成经过身份验证的连接(例如...

3364
来自专栏偏前端工程师的驿站

.Net魔法堂:史上最全的ActiveX开发教程——部署篇

一、前言                                   接《.Net魔法堂:史上最全的ActiveX开发教程——发布篇》,后我们继续来部署...

1895
来自专栏進无尽的文章

精析-苹果开发者证书的实现机制

      在iOS开发过程中,不可避免的要和证书打交道,真机调试、App上架、打包给测试去测试等都需要搞证书。在此过程中我们会遇到很多的问题,但是如果掌握了真...

2002
来自专栏程序员同行者

企业级Docker私有仓库部署(https)

1204
来自专栏葡萄城控件技术团队

如何添加ActiveReports 6导出PDF时的安全设置和数字签名

PDF格式已经成为广为应用的电子文档交换格式标准。为了便于用户在组织内和组织之间共享报表数据,ActiveReports 6可以将生成的报表导出为PDF格式。下...

2176
来自专栏偏前端工程师的驿站

.Net魔法堂:史上最全的ActiveX开发教程——发布篇

一、 前言                                  接着上一篇《.Net魔法堂:史上最全的ActiveX开发教程——开发篇》,本篇讲述...

2516
来自专栏码农二狗

不使用smtp直接发送邮件

2311

扫码关注云+社区

领取腾讯云代金券