使用HTML Element模拟数字(验证码)

翅膀的初衷

发表于2014-08-12 23:24:38

有一次在某网站注册的时候，很惊奇的发现它的验证码不是我们常见的动态图片，而是通过HTML Element摸拟出来的。

于是在某天无聊的时候，自己也用JS来模拟来实现了一下。

因为考虑简单，这里只实现了纯数字展示，没有考虑字母。而数字的实现可以参考常用的一些显示屏，比如以前的那种电子表，只需要3x5个格子就可以完美展现0-9个数字。为了方便操作，我们可以把0-9的各个显示情况定义一个多维数组,比如0是：

然后我们再按照这个数组的情况，0填充白色元素，1填充黑色元素即可。

我们来看看具体的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script src="http://www.jiniannet.com/Resources/Script/JQuery.js"></script>
</head>
<body>

        <script type="text/javascript">

            $(function () {
                createCode("2431", 5)
            })

            $("td").click(function () {
                $(this).addClass("black");
            });

            function createCode(code, size) {
                var html = '<table><tr>';
                for (var i = 0; i < code.length; i++) {
                    html += '<td width=' + (size * 4) + '>';
                    html += createElement(code.charAt(i), size);
                    html += '</td>'
                }
                html += '</tr></table>';
                var div = document.createElement('div');
                div.innerHTML = html;
                document.body.appendChild(div);
            }

            function createElement(n, size) {
                var node = __list[parseInt(n)];
                var html = '<table style="border:none; border-collapse:collapse; empty-cells:show;"><tr><td></td><td></td><td></td><td></td></tr>';
                for (var i = 0; i < node.length; i++) {
                    html += '<tr>';
                    for (var j = 0; j < node[i].length; j++) {
                        if (node[i][j]) {
                            html += '<td style="background-color:#000;"></td>';
                        } else {
                            html += '<td></td>';
                        }
                    }
                    html += '<td></td></tr>';
                }
                html += '<tr><td></td><td></td><td></td><td></td></tr></table>';

                var r = document.createElement("div");
                r.innerHTML = html;

                var list = r.getElementsByTagName("td");

                for (var i = 0; i < list.length; i++) {
                    list[i].style.width = size + "px";
                    list[i].style.height = size + "px";
                    list[i].style.border = "solid 1px #fff";
                }

                return r.innerHTML;
            }

            var __list = [
            [
                [1, 1, 1],
                [1, 0, 1],
                [1, 0, 1],
                [1, 0, 1],
                [1, 1, 1]
            ],
            [
                [0, 1, 0],
                [1, 1, 0],
                [0, 1, 0],
                [0, 1, 0],
                [1, 1, 1]
            ],
            [
                [1, 1, 1],
                [0, 0, 1],
                [1, 1, 1],
                [1, 0, 0],
                [1, 1, 1]
            ],
            [
                [1, 1, 1],
                [0, 0, 1],
                [1, 1, 1],
                [0, 0, 1],
                [1, 1, 1]
            ],
            [
                [1, 0, 1],
                [1, 0, 1],
                [1, 1, 1],
                [0, 0, 1],
                [0, 0, 1]
            ],
            [
                [1, 1, 1],
                [1, 0, 0],
                [1, 1, 1],
                [0, 0, 1],
                [1, 1, 1]
            ],
            [
                [1, 1, 1],
                [1, 0, 0],
                [1, 1, 1],
                [1, 0, 1],
                [1, 1, 1]
            ],
            [
                [1, 1, 1],
                [0, 0, 1],
                [0, 0, 1],
                [0, 0, 1],
                [0, 0, 1]
            ],
            [
            [1, 1, 1],
                [1, 0, 1],
                [1, 1, 1],
                [1, 0, 1],
                [1, 1, 1]
            ],
            [
                [1, 1, 1],
                [1, 0, 1],
                [1, 1, 1],
                [0, 0, 1],
                [1, 1, 1]
            ]
            ]

        </script>



</body>
</html>

把以上内容复制下来，保存为一个HTML文件，双击运行，就可以看到如下结果：

看起来效果是不是不错，我们调用createCode("2431", 5)方法就可以模拟出结果来，第一个参数是显示的数字，第二个是显示大小。

在这里提醒大家的是，这些代码是不能真正用于验证码的，如果想用于真正的验证码，必须将生成元素这一步交给后台语言去做，而且黑色格子不能全部为纯黑色，必须在某一个范围内变动最佳，而且元素最好不要用TD,因为TD太有规律了，很好用JS识别。

来源：本站原创点击：46941