获取短信验证码特效

 页面：

输入框，短信获取按钮

<span>请输入动态密码:<input type="text" class="check_input"

                        name="telpass" id="checkNum"  placeholder="手机动态密码" />
                        <button class="check-code-btn" type="button" id="messageBtn"

                            οnclick="getMessageCode();">获取手机动态码</button></span>

<div id="send-span" style="display: none; font-size: 12px;"></div>

<script type="text/javascript">

/**
 *    禁用短信发送按钮time长时间
 */
        function checkSendTime(time) {
            if (time <= 1) {
                $("#messageBtn").html("获取短信验证码");
                $("#messageBtn").removeAttr("disabled");
            } else {
                time = time -1;
                $("#messageBtn").html(time + "秒后重新获取");
                setTimeout(function() {
                    checkSendTime(time);
                },1000);
            }
        }

/**
         *    发送短信验证码
         */
        function getMessageCode(){
            var phone= $("#Phone").val();
            $("#send-span").css("display","block");
            $.ajax({
                type:'post',
                url:'*******',
                dataType:'json',
                data: {
                    phone : phone
                },
                async:false,
                error:function(){
                  $("#send-span").html("<span style='color:red;'>短信发送失败，请重新发送！</span>");
                },
                success:function(data){
                    if(data.aaa){
                        alert(data.yzm);
                        $("#send-span").html("<span style='color:green;'>短信已发送到您的手机，请输入短信中的验证码，有效时间3分钟，此服务免费。</span>");
                        $("#messageCheckCode").focus();
                        $("#messageBtn").attr("disabled","disabled");
                        checkSendTime(60);
                    }else{
                         $("#send-span").html("<span style='color:red;'>图片验证码输入错误，请重新输入！<span>");
                    }
                    
                }
            });
        }

</script>