模拟支付宝支付

以前在我没有编写设置支付密码的时候，以为这种效果（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、刷脸支付