记一次超越人类极限的在线打字
in 安全 with 0 comment

记一次超越人类极限的在线打字

in 安全 with 0 comment

先贴图,无图不服众。
QQ截图20161021234339.png

QQ截图20161021234401.png

安利一波网址:在线打字测试(不是打广告,纯属无聊试试手)

OK,那么现在开始贴代码:

var bb =document.getElementById("content").getElementsByTagName("input"),str='';
    for (var i=0; i<bb.length; i++){
        if (bb[i].type=="hidden"){
            str=bb[i].value;
        }
        if (bb[i].type=="text"){
            bb[i].value=str;
        }
    }

这是第一版的js代码,拷贝进浏览器之后发现文字的确是全部输入好了,可是焦点依旧选定在第一行且滚动条固定在顶部拉不下去。

这个时候有2个办法:
1.把焦点给到页面底部,触发onkeyup事件直接提交,
2.js模拟触发onkeyup事件,自动填充自动keyup换行。

然后一段balabala的查资料敲代码,结果发现他是闭包js,外部调用不了。第二个方法经过多方查阅,js似乎没有模拟onkeyup的方法。那么目前2条线索都断了。

又一段balabala,把方法二改进了,手动触发keyup自动填充

于是第二版代码诞生了,贴进console里一次通过

    function autoWrite(){
        var bb =document.getElementById("content").getElementsByTagName("input"),str='';
        for (var i=0; i<bb.length; i++) {
            if (bb[i].type=="hidden"){
                str=bb[i].value;
            }
            if (bb[i].type=="text" && bb[i].value.length <5){
                bb[i].value=str;
                return;
            }
        }
    }
    document.getElementById("content").onkeypress=function(){
        autoWrite();
    };
    autoWrite();//这个是load之后自动填充第一行,按下任意按键填充第二行。。类推。。

总之就这样超越了人类极限,代码自我感觉不是最优,仍有继续优化的空间。

Comments are closed.