淘先锋技术网

首页 1 2 3 4 5 6 7

html获取验证码(pc端)

html获取验证码代码(pc端)

效果：
在这里插入图片描述

在这里插入图片描述

已将html代码和css代码和js代码，放在了一起。
我自己引入了jquery,别忘记了。
如果觉得样式不好看可以自行调整css。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="user-scalable=0">
    <meta charset="UTF-8">
    <title>title</title>
</head>
<script src="jquery.js"></script>
<style>
    .centerDiv{
        width: 50%;
        left: 25%;
        position: absolute;
    }
    .mobileColumnKey {
        text-align: left;
        padding-left: 3rem;
        font-size: 2.4rem;
        font-weight: bold;
        color: black;
        float: left;
        width: 20%;
        margin-left: 5%;
    }

    .columnKeyAndValue {
        padding-top: 1.5rem;
        padding-bottom: 0.5rem;
        margin-top: 2rem;
        overflow: hidden;
        clear: both;
        border: #FFE65C 0.3rem solid;
        border-radius: 5rem;
        background-color: white;
    }

    .columnValue {
        border: none;
        float: left;
        width: 50%;
        padding: 0.4rem 0.3rem;
        margin-bottom: 1rem;
        font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
        font-size: 2.3rem;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
        transition: all 0.25s linear;
    }

    .columnKey {
        text-align: center;
        margin-left: 15%;
        font-size: 2.1rem;
        font-weight: bold;
        color: white;
        float: left;
        width: 25%;
        background-color: #0aA1FF;
        border-radius: 1rem;
    }
</style>
<body>
    <div class="centerDiv">
        <div class="columnKeyAndValue">
            <div class="mobileColumnKey">+86</div>
            <input type="text" class="columnValue" id="contactNumberId" name="contactNumber"
                   placeholder="请输入手机号码">
        </div>
        <div class="columnKeyAndValue">
            <input type="text" class="columnValue" id="yzmCode" name="yzmCode"
                   style="width: 40%;margin-left: 5%;padding-left: 3rem;" placeholder="请输入验证码">
            <div class="columnKey" onclick="getCode()" id="getCodeId">获取验证码</div>
        </div>
    </div>
</body>

<script>
    //校验手机号
    function checkContactNumber() {
        let contactNumberValue = document.getElementById("contactNumberId").value;
        if (!(/^1[3456789]\d{9}$/.test(contactNumberValue))) {
            //匹配失败
            return false;
        } else {
            //匹配成功
            return true;
        }
    }

    //获取验证码
    function getCode() {
        var mobileFlag = checkContactNumber();
        if (!mobileFlag) {
            alert("手机号不正确");
            return;
        } else {
            alert("验证码已发送");
            // 这里可以写ajax,传入手机号，服务器可以去给手机发短信了
        }
        countDown();
    }

    var endTime = 60;

    //倒计时
    function countDown() {
        var t = endTime;
        t--;
        if (t < 0) {
            endTime = 60;
            return;
        }
        endTime = t;
        //按钮显示时间
        $("#getCodeId").text(t + "");
        //按钮不可点击
        $("#getCodeId").removeAttr("onclick");
        //按钮字体变灰
        $("#getCodeId").css("color", "#ACACAC");
        //按钮变白
        $("#getCodeId").css("backgroundColor", "white");

        //如果时间小于等于0秒，停止调用
        if (t > 0) {
            setTimeout(function () {
                this.countDown()
            }, 1000);
        } else {
            //显示--获取验证码
            $("#getCodeId").text("获取验证码");
            //按钮可点击
            $("#getCodeId").attr("onclick", "getCode()");
            //按钮恢复
            $("#getCodeId").css("color", "white");
            //按钮变蓝
            $("#getCodeId").css("backgroundColor", "#0aA1FF");
            //设置倒计时时间
            endTime = 60;
        }
    }
</script>
</html>