专栏首页编程坑太多js验证码倒计时

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),作者:诸葛阿明

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css写出爱心版加载效果

    IT故事会
  • 为什么很多人会觉得IT门槛低?

    IT故事会
  • 「小程序JAVA实战」微信小程序工程结构了解(五)

    PS:这就是对微信小程序工程结构的大致了解,了解了结构才方便按照规范开发,不容易入坑。

    IT故事会
  • thinkPHP利用ajax异步上传图片并显示、删除的示例

    利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题。

    砸漏
  • thinkPHP利用ajax异步上传图片并显示、删除的示例

    利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题。

    砸漏
  • css实现一款漂亮的查询框

    上面展示的是实现后的效果,实现的主要在css控制,再次,添加了text的获得焦点和失去焦点的事件,下面是详细代码:

    lzugis
  • Extjs 项目中常用的小技巧,也许你用得着(1)

    我在项目中遇到的一些知识点: 1.在GridPanel中显示图片,效果 ? 对应的代码实现 { text: '是否启用...

    hbbliyong
  • 电话悬浮代码

    <style type="text/css"> *{ margin:0; padding:0; list-style:none;} body{ font-siz...

    小小鱼儿小小林
  • 文字搬运工

    IT人一直在路上
  • CSS使用技巧

    http://www.ruanyifeng.com/blog/2010/03/css_cookbook.html

    bear_fish

扫码关注云+社区

领取腾讯云代金券