密码框（延时事件）

最新推荐文章于 2020-05-19 13:12:22 发布

Angle灬魔君

最新推荐文章于 2020-05-19 13:12:22 发布

阅读量232

点赞数

分类专栏： js 前端文章标签：密码框延时事件

本文链接：https://blog.csdn.net/AMrss/article/details/95392817

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

<style>
        #app{
            width: 187px;
            height: 32px;
            margin: 50px auto 0;
            border: #DDD 1px solid;
            display: flex;
        }

        #app>div{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #app>div:not(:first-of-type){
            border-left: #DDD 1px solid;
        }
    </style>

<body id="body">

    <div id="app">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <span id="pass"></span>

    <script>
        
        function getById(name){
            return document.getElementById(name);
        }

        var body = getById("body");
        var pass = getById("pass");
        var p = getById("app").children[0];
        var ps = [];
        var i = 0;

        body.onkeydown = function(){
            var code = event.keyCode;
            if(8 !=code && (code<48 || code>57)){
                return false;
            }
            if(code==8){
                var size = p.innerText.length;
                var prev = p.previousElementSibling;
                if(size==0){
                    if(null==prev){
                        return;
                    }
                    p = prev;
                    i--;
                }
                p.innerText = "";
                ps[i]="";
                pass.innerText = ps.join("");
                prev = p.previousElementSibling;
                if(null!=prev){
                    p = prev;
                    i--;
                }
            }else{
                if(p.innerText.length>0){
                    p = p.nextElementSibling;
                    i++;
                }
                p.innerText = code-48;
                ps[i] = code-48;
                pass.innerText = ps.join("");
                var t = p;
                setTimeout(function(){
                    t.innerText = "●";
                },200);
                if(null==p.nextElementSibling){
                    window.location="http://www.baidu.com";
                    return;
                }
                p = p.nextElementSibling;
                i++;
            }
        }

    </script>
    
</body>

Angle灬魔君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
密码框（延时事件）

<style> #app{ width: 187px; height: 32px; margin: 50px auto 0; border: #DDD 1px solid; display: flex; } #app&...
复制链接

扫一扫