模拟支付寶支付

以前在我沒有編寫設定支付密碼的時候，以為這種效果（js）很好實作，結果當我做的時候布局到時很簡單，可是在用js的時候弄的我一個頭是兩個大。

第一次我是用一個input框，然後設定input的最大長度為6，然後用letter-space設定間距，和設計圖例的樣式完全不對不說，每一次輸入到最後一個的時候，input框文字始終要往前面退一格。

第二次寫的時候我是設定6個input密碼框，忽略到咯手機的鍵盤，每輸入一個input，鍵盤要隐藏一次，然後在繼續彈出鍵盤文字，弄咯好久也還是有瑕疵，反正實踐咯很多方法都有問題。

最後我在網上看見别人優秀的支付設定，是以我也試着自己弄一個出來。做飯還是和上面寫的第二次做的一樣，還是設定6個input輸入框，然後設定最大長度為一，就是一個輸入框裝一個數字。然後輸入的數字我是自己寫的模拟鍵盤，從0---9，然後添加一個删除按鈕即可，

1、首先我們要明白elements是做什麼的

elements 集合可傳回包含表單中所有元素的數組。

元素在數組中出現的順序和它們在表單的HTML 源代碼中出現的順序相同。

每個元素都有一個 type 屬性，其字元串值說明了元素的類型。

2、首先我們先把布局弄好。布局這個嘛相信都難不倒大家的。代碼如下，我都标有注釋的

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>模拟支付寶支付</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{ background:#ccc;font-family:'Microsoft Yahei';}
        li{list-style: none;}
        .box{padding:8% auto; height:250px;border:1px solid red; border-radius: 5px;background:pink;}
        .box .apltitle{ line-height: 50px;text-align: center; font-size: 16px;padding:0 5%;margin-top: 10%;}
        .box .password input{border:0; width:100%;text-align: center; line-height: 35px; font-size: 30px; font-weight: bold;}
        /*numberBox*/
        .numberBox{ position:fixed;width:100%; left:0; bottom:0; background:#fff; }
        .numberBox li{ width:33.333%; line-height: 45px; float:left; text-align: center; font-size: 18px;border:1px solid #e0dfdf;
            border-bottom:0;border-left: 0;
            -webket-box-sizing:border-box;
               -moz-box-sizing:border-box;
                    box-sizing:border-box;}
        .numberBox li.border_right_none{border-right: 0;}
        .numberBox li.grayBG{background:#ccc;}
        .transparent{ color:transparent;}
        /*模拟鍵盤數字*/
        #password{ width:260px; margin:0 auto;background:blue;}
        #password input{display:block; width:40px; height:40px; float:left;border:0;text-align: center; line-height: 40px; font-size: 30px; font-weight: bold;border:1px solid #aaa;border-left:0; margin-top: 15px;}
        #password input:first-child{ border-left:1px solid #aaa;margin-left: 3%;}
        .nextBtn{height:auto; overflow:hidden; width:100%;}
        .nextBtn input{ width:90%;display:block;margin-left: 10%; border:0;margin:8% 5%; line-height: 45px; border-radius: 8px; background:orange; color:#fff;font-family:'Microsoft Yahei';}
        .nextBtn input:hover{ background: #ccc; color:#fff;}
    </style>
</head>
<body>
    <div class="box">
        <div class="apltitle"><span id="set_text"></span></div>
        <!-- 6個input 輸入框 -->
        <form action="" id="password">
            <input type="text" maxLength="1" class="pass" readonly />
            <input type="text" maxLength="1" class="pass" readonly />
            <input type="text" maxLength="1" class="pass" readonly />
            <input type="text" maxLength="1" class="pass" readonly />
            <input type="text" maxLength="1" class="pass" readonly />
            <input type="text" maxLength="1" class="pass" readonly />
        </form>
        <div class="nextBtn" ><input id="btn_next" style="color:red" type="button" value="下 一 步" disabled></div>
    </div>
    <!-- 數字number -->
    <div class="numberBox" id="numberBox">
        <ul id="keyboard" > 
            <li class="Num"><span class="off">1</span></li>
            <li class="Num"><span class="off">2</span></li>
            <li class="Num border_right_none"><span class="off">3</span></li>
            <li class="Num"><span class="off">4</span></li>
            <li class="Num"><span class="off">5</span></li>
            <li class="Num border_right_none"><span class="off">6</span></li>
            <li class="Num"><span class="off">7</span></li>
            <li class="Num"><span class="off">8</span></li>
            <li class="Num border_right_none"><span class="off">9</span></li>
            <li class="cancle transparent grayBG">取消</li>
            <li class="Num"><span class="off">0</span></li>
            <li class="delete border_right_none grayBG">删除</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/setPassword.js"></script>
</html>

3、最難的來咯js控制。

a:設定一些要用到的全局變量

b:設定鍵盤數字的點選事件（點選一個數字把值穿給input，直達點選6個為止）點選事件控制這裡的流程有點複雜，具體的看我代碼吧，上面我都有注釋的

/* 
* @Author: Lydia
* @Description:仿制支付寶支付樣式流程控制
* @Date:   2017-02-13 16:13:18
* @Last Modified by name:   Lydia
* @Last Modified time: 2017-02-14 15:03:07
*/
var pass_word='',//輸入的密碼
    rePass_word='', //第二次輸入的确認密碼
    passwords = $('#password').get(0),
    check_pass_word='',n ,
    inputLen = $("#password input");
var character;//中間變量
console.log("len:"+inputLen.length);

$("input.pass").attr("disabled",true);
$("#password").attr("disabled",true);
/*事件 */
$('#keyboard li').click(function(){
    //删除操作
    if ($(this).hasClass('delete')) {
        for(var i= 0,len=passwords.elements.length-1;len>=i;len--){
            console.log("ss:"+passwords.elements.length-1);
            if($(passwords.elements[len]).val()!=''){
                $(passwords.elements[len]).val('');
                if($(passwords.elements[5]).val()== null ||$(passwords.elements[5]).val()==undefined||$(passwords.elements[5]).val()==''){
                    if(pass_word==''){
                        $("#btn_next").attr("disabled",true);
                    }
                }
                break;
            }
        }
        return false;
    }


    //取消操作
    if ($(this).hasClass('cancle')) {
        console.log("次功能暫未開發");
        //parentDialog.close();
        pass_word = null;
        return false;
    }

    //密碼操作
    if ($(this).hasClass('Num') || $(this).hasClass('tab')){
        character = $(this).text();
    }
    //第一次輸入的設定密碼
    for(var i= 0,len=passwords.elements.length;i<len;i++){
        if($(passwords.elements[i]).val()==null ||$(passwords.elements[i]).val()==undefined||$(passwords.elements[i]).val()==''){
            $(passwords.elements[i]).val(character);
            break;
        } 
    }
    //第二次輸入确認密碼情況
    if(!($(passwords.elements[5]).val() == null ||$(passwords.elements[5]).val()==undefined||$(passwords.elements[5]).val()=='')) {
        if (pass_word == '') {
            $("#btn_next").removeAttr("disabled");
        } else {
            var temp_rePass_word = '';
            for (var i = 0; i < passwords.elements.length; i++) {
                temp_rePass_word += $(passwords.elements[i]).val();
            }
            rePass_word = temp_rePass_word;
            console.log("第二次輸入密碼:"+rePass_word);
            //$("#keyboard").hide("rePass_word:"+rePass_word);
            //這裡是判斷密碼不為空并且與起初設定的密碼一緻
            if(rePass_word!='' && pass_word==rePass_word){
                $("#numberBox").hide();
                var result_text='\
                    <span>兩次密碼一緻</span>\
                    <span style="color: red;">正在自動跳轉</span>\
                    ';
                $("#set_text").html(result_text);
                $("input.pass").attr("disabled",true);
                $("#password").attr("disabled",true);

                //輸入密碼正确的話網頁跳轉到百度去
                var t=2;
                var t1 = window.setInterval(function(){
                    t--;
                    if(t==0){
                        window.clearInterval(t1);
                        var phone = $("#cellPhone").val();
                        window.location.href="http://www.baidu.com/" target="_blank" rel="external nofollow" ;
                    }
                },1000);

            }else{
                //兩次輸入密碼不一緻的情況
                var result_text='\
                    <span>兩次</span>\
                    <span style="color: red;">提貨密碼</span>\
                    <span>不一緻，請重新輸入</span>\
                    ';
                $("#set_text").html(result_text);
                for(var i=0;i<passwords.elements.length;i++){
                    $(passwords.elements[i]).val('');
                }
                rePass_word='';
                $("#keyboard").show();
            }
        }
    }
    return false;

});

//下一步
$("#btn_next").click(function(){
    if(pass_word.length<6){
        console.log("密碼必須為6位數！");
    }
    var reset_text='\
        <span>請再次輸入</span>\
        <span style="color: red;">提貨密碼</span>\
    ';
    $("#set_text").html(reset_text);
    var temp_password='';
    for(var i=0;i<passwords.elements.length;i++){
        temp_password+=$(passwords.elements[i]).val();
        $(passwords.elements[i]).val('');
    }
    pass_word=temp_password;
    console.log("密碼是："+pass_word);
    $(".nextBtn").attr("hidden",true);
});
(function () {
    function tabForward(e) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.value.length === target.maxLength) {
            var form = target.form;
            for (var i = 0, len = form.elements.length-1; i < len; i++) {
                if (form.elements[i] === target) {
                    if (form.elements[i++]) {
                        form.elements[i++].focus();
                    }
                    break;
                }
            }
        }
    }
    var form = document.getElementById("password");
    form.addEventListener("keyup", tabForward, false);
    var set_text='\
    <span>設定</span>\
    <span style="color: red;">提貨密碼</span>\
    <span>,建議與</span>\
    <span style="color: red;">登陸密碼</span>\
    <span>不同</span>\
    ';
    $("#set_text").html(set_text);
})();

這裡為咯能快速檢視，是以我使用的input type為text ，當要用到實際的項目中隻需要把type 改為 password 即可。

有什麼不懂的可以call 我

模拟支付寶支付

模拟支付寶支付

繼續閱讀

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

申請開通支付寶當面付、電腦網站、手機網站、APP、刷臉支付