极念网欢迎您!
使用HTML Element模拟数字(验证码)
作者:翅膀的初衷来源:本站原创发布时间:2014/8/12 23:24:38查看数:44076

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

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

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

            [
                [1, 1, 1],
                [1, 0, 1],
                [1, 0, 1],
                [1, 0, 1],
                [1, 1, 1]
            ]

然后我们再按照这个数组的情况,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识别。