2019-01-07 验证码 倒计时

<!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 lang="zh-cmn-Hans">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>yzz</title>      
</head>
<style type="text/css">
    .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;
        }
    .msgs1 {
        background: #E6E6E6;
        color: #818080;
        border: 1px solid #CCCCCC;
    }
</style>
<body>

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

</body>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
        $(function() {

            //获取短信验证码
            var validCode = true;
            $(".msgs").click(function (event) {
                var myreg = /^1[345678]\d{9}$/;
                var phone = $('#phone').val();
                var qrnumber = $('#qrnumber').val();
                if (!myreg.test(phone)) {
                    alert("手机号码不合法！");
                    $("#phone").focus();// 当元素获得焦点时，发生 focus 事件
                    return false;
                }
                var time = 60;
                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);
                    $.post("{:U('Index/getsms')}",{phone:phone,qrnumber:qrnumber},function(result){
                        if (result.status == 1) {
                            alert(result.msg);
                        } else {
                            alert(result.msg);
                            // layer.msg(result.msg, function(){
                            //     //关闭后的操作
                            // });
                        }
                    });
                    return false;
                }
            });
    
        });
        
    </script>
    
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容