jquery表单如何获取短信验证码代码?

2017-03-13 1756 9 编辑:深圳网站建设 来源:互联网

<!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>jquery表单获取短信验证码代码</title>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

$(function  () {

        //获取短信验证码

        var validCode=true;

        $(".msgs").click (function  () {

                var time=30;

                var code=$(this);

                if (validCode) {

                        validCode=false;

                        code.addClass("msgs1");

                var t=setInterval(function  () {

                        time--;

                        code.html(time+"秒");

                        if (time==0) {

                                clearInterval(t);

                        code.html("重新获取");

                                validCode=true;

                        code.removeClass("msgs1");

                        }

                },1000)

                }

        })

})

</script>

<style type="text/css">

form{margin:200px auto;width:500px;}

label{font-size:14px;color:#555;line-height:40px;margin-right:10px;}

input{width:212px;height:38px;border-style:none;padding:0 4px;border:1px solid #C8C8C8;margin-right:10px;outline:none;}

.msgs{display:inline-block;width:104px;color:#fff;font-size:12px;border:1px solid #0697DA;text-align:center;height:30px;line-height:30px;background:#0697DA;cursor:pointer;}

form .msgs1{background:#E6E6E6;color:#818080;border:1px solid #CCCCCC;}

</style>

</head>

<body>

<form>

        <label style="float:left;">验&nbsp;&nbsp;证&nbsp;码</label>

        <input type="text" class="c_code_msg" style="margin-right: 10px;">

        <span class="msgs">获取短信验证码</span>

</form>

</body>

</html>

jquery表单获取短信验证码代.jpg

专业的网站建设公司,深正互联,如您有网站营销需求,请您关注我们,或者致电13828884598


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联