index.html 3.1 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>福牌公众号</title>
    <script src="js/jquery-2.1.0.js"></script>
    <script src="js/fontsize.js"></script>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="content">
    <div class="input-box">
        <div class="top-input">
            <div class="border-line-box">
                <image src="./images/phone_icon.png" class="phone-icon"></image>
                <!--<form action="" onsubmit="return doValidate()" name="forma" class="form">-->
                <input type="number" name="name" id="phone" placeholder="手机号" class="phone-input" value="">
                <!--</form>-->
            </div>
        </div>
        <div class="bottom-input">
            <div class="border-line-box2">
                <div class="input-code-box">
                    <image src="./images/code_icon.png" class="code-icon"></image>
                    <input type="number" placeholder="验证码" class="code-input">
                </div>
                <button class="getCode">获取验证码</button>
            </div>
        </div>
    </div>
    <div class="next-btn">
        <div class="next" onclick="goNext()">下一步</div>
    </div>
</div>
</body>
<script>
    function goNext() {
        window.location.href = './personal-info.html';
    }

    // function doValidate() {
    //     var phone = document.getElementById('phone').value;
    //     if (!(/(^[0-9]{3,4}\-[0-9]{7}$)|(^[0-9]{7}$)|(^[0-9]{3,4}[0-9]{7}$)|(^0{0,1}13[0-9]{9}$)/.test(phone))) {
    //         alert("手机号码有误,请重填");
    //         return false;
    //     } else {
    //         // btnCheck()
    //     }
    // }

    // $("input[type='button']").click(doValidate);
    /**
     * [btnCheck 按钮倒计时常用于获取手机短信验证码]
     */
    // function btnCheck() {
    //     $(this).addClass("on");
    //     var time = 60;
    //     $(this).attr("disabled", true);
    //     var timer = setInterval(function() {
    //         if (time == 0) {
    //             clearInterval(timer);
    //             $(".button").attr("disabled", false);
    //             $(".button").val("获取验证码");
    //             $(".button").removeClass("on");
    //         } else {
    //             $('.button').val(time + "秒");
    //             time--;
    //         }
    //     }, 1000);
    // }


    $(function () {
        //获取短信验证码
        var validCode = true;
        $(".getCode").click(function () {
            var time = 60;
            var $code = $(this);
            if (validCode) {
                validCode = false;
                var t = setInterval(function () {
                    time--;
                    $code.html(time + "秒");
                    if (time == 0) {
                        clearInterval(t);
                        $code.html("重新获取");
                        validCode = true;
                    }
                }, 1000)
            }
        })
    })

</script>
</html>