html

<div class="pwdContent">
    <div class="pwdBox"></div>
    <div class="pwdErrorPoint">請輸入數字！</div>

</div>

js

// 簡訊驗證碼
/*動態生成*/
var pwdBox = document.getElementsByClassName("pwdBox")[0];

function createDIV1(num) {
    for (var i = 0; i < num; i++) {
        var pawDiv = document.createElement("div");
        pawDiv.className = "pawDivVali";
        pwdBox.appendChild(pawDiv);
        var paw = document.createElement("input");
        paw.type = "password";
        paw.className = "pawVali";
        paw.maxLength = "1";
        paw.readOnly = "readonly";
        pawDiv.appendChild(paw);
    }
}

createDIV1(6);


var pawDivVali = document.getElementsByClassName("pawDivVali");
var pawVali = document.getElementsByClassName("pawVali");
var pawDivCountVali = pawDivVali.length;
/*設定第一個輸入框預設選中*/
// pawDiv[0].setAttribute("style","border: 2px solid deepskyblue;");
pawVali[0].readOnly = false;
pawVali[0].focus();

var pwdErrorPoint = document.getElementsByClassName("pwdErrorPoint")[0];

/*繫結pawDiv點選事件*/

function func1() {
    for (var i = 0; i < pawDivCountVali; i++) {
        pawDivVali[i].addEventListener("click", function () {
            pawDivClick1(this);
        });
        pawVali[i].onkeyup = function (event) {
            console.log(event.keyCode);
            if (event.keyCode >= 48 && event.keyCode <= 57) {
                /*輸入0-9*/
                changeDiv1();
                pwdErrorPoint.style.display = "none";

            } else if (event.keyCode == "8") {
                /*退格回刪事件*/
                firstDiv1();

            } else if (event.keyCode == "13") {
                /*回車事件*/
                getPassword1();

            } else {
                /*輸入非0-9*/
                pwdErrorPoint.style.display = "block";
                this.value = "";
            }

        };
    }

}

func1();


/*定義pawDiv點選事件*/
var pawDivClick1 = function (e) {
    for (var i = 0; i < pawDivCountVali; i++) {
        // pawDivVali[i].setAttribute("style","border:none");
    }
};


/*定義自動選中下一個輸入框事件*/
var changeDiv1 = function () {
    for (var i = 0; i < pawDivCountVali; i++) {
        if (pawVali[i].value.length == "1") {
            /*處理當前輸入框*/
            pawVali[i].blur();
            /*處理上一個輸入框*/
            // 新增背景點
            // paw[i].setAttribute("style","background: red;");
            if (i == 5) {
                alert("驗證碼輸入是否正確")
                getPassword1();
                return
            }
            pawVali[i + 1].focus();
            pawVali[i + 1].readOnly = false;
            pawDivClick(pawVali[i + 1]);
        }
    }
};

/*回刪時選中上一個輸入框事件*/
var firstDiv1 = function () {
    for (var i = 0; i < pawDivCountVali; i++) {
        console.log(i);
        if (pawVali[i].value.length == "0") {
            /*處理當前輸入框*/
            console.log(i);
            pawVali[i].blur();
            /*處理上一個輸入框*/
            pawVali[i - 1].focus();
            pawVali[i - 1].readOnly = false;
            pawVali[i - 1].value = "";
            pawDivClick(pawVali[i - 1]);
            break;
        }
    }
};


/*驗證碼輸入錯誤直接回到第一個輸入框事件*/
var firstDiv2 = function () {
    for (var i = 0; i < pawDivCountVali; i++) {
        console.log(i);
        pawVali[i].value = ""
        /*處理當前輸入框*/
        console.log(i);
        pawVali[i].blur();

        /*處理上一個輸入框*/
        pawDivClick(pawVali[i]);

    }
    pawVali[0].focus();
    pawVali[0].readOnly = false;
};


/*獲取輸入密碼*/
var getPassword1 = function () {
    var n = "";
    for (var i = 0; i < pawDivCountVali; i++) {
        n += pawVali[i].value;
    }
    // 如果密碼輸入成功
    $(".pay-ui-btn").removeClass("disable")
    alert(n);
    $("#pursePayForm input[name='validateCode']").val(n)
    alert("驗證碼輸入錯誤")
    $(".errorPointVali").css({display: 'block'})
    setTimeout(function () {
        $(".errorPointVali").css({display: 'none'})
    }, 2000)
    firstDiv2()
};
// var getPasswordBtn=document.getElementsByClassName("getPasswordBtn")[0];
//
// getPasswordBtn.addEventListener("click",getPassword);

/*鍵盤事件*/
document.onkeyup = function (event) {
    if (event.keyCode == "13") {
        /*回車事件*/
        getPassword();
    }
};


css

.pwdBox {
    width: 228px;
    height: 37px;
    border: 1px solid #ccc;
    margin-top: 10px;
    line-height: 30px;
}

#validateBox {
    position: relative;
}

.jp-logo-wrap {
    position: absolute;
}

.jp-logo-wrap .jp-logo {
    background-position: -51px -41px;
    width: 102px;
    height: 35px;
    position: absolute;
    left: -34px;
    top: 5px;
    background: url('http://test.storage.jd.com/et-trade/pdf/receipt/20181019/cashier_two.jpg?Expires=1575941007&AccessKey=jZAZj2evo1DsyCu7&Signature=XWPKewwj1oNwdEKedpQOFzTOAwM%3D') no-repeat;
}

.index-cont-top span {
    background-position: -51px -77px;
    background: url('http://test.storage.jd.com/et-trade/pdf/receipt/20181019/cashier_two.jpg?Expires=1575941007&AccessKey=jZAZj2evo1DsyCu7&Signature=XWPKewwj1oNwdEKedpQOFzTOAwM%3D') no-repeat;
    border-bottom: 1px solid #eee;
}

// 簡訊驗證碼倒計時

html  

<div class="validSend">
    <input type="button" id="btn" value="免費獲取驗證碼" onclick="settime(this)"/>
</div>

js

var countdown = 60;

function settime(obj) {
    sedSms();
    if (countdown == 0) {
        obj.removeAttribute("disabled");
        obj.value = "免費獲取驗證碼";
        countdown = 60;
        return;
    } else {
        obj.setAttribute("disabled", true);
        obj.value = "重新發送(" + countdown + ")";
        countdown--;
    }
    setTimeout(function () {
                settime(obj)
            }
            , 1000)
}