【原创】JS 版 HTML验证码

<!doctype html><html><head>
<style type="text/css">
span.code{ height: 15px; padding: 4px 3px; display: inline-block; vertical-align: middle; background-color: #abcdef }
span.code a, span.code b{ width: 3px; height: 3px; float: left }
span.code b{ background-color: #000 }
</style></head><body>
<span class="code"></span>
<p class="data"></p>
<script type="text/javascript">
var veri = new Vericode("span.code");
setInterval(function() {
	var rnd =veri.encode(Math.random().toString().slice(-4));
	document.querySelector(".data").innerHTML = rnd;
	veri.showCode(rnd);
}, 1000);
function Vericode(tag) {
	var sec = "12457";
	var dic = "43334,11111,40424,40404,33400,42404,42434,40000,43434,43404".split(",");
	var img= document.querySelector(tag);
	this.encode = function(num) {
		var num = Math.random().toString().slice(-4);
		var arr = new Array, bts = num.split("");
		for(var x = 0; x < bts.length; x++) {
			var s = bts[x].split("");
			for(var y = 0; y < s.length; y++) {
				var c = dic[s[y]].split("");
				for(var i = 0; i < 5; i++) {
					if(!arr[i]) arr[i] = "";
					arr[i] += c[i];
				}
			}
		}
		return parseInt(arr.join(""), 5).toString(36);
	};
	this.showCode = function(code) {
		code = parseInt(code, 36).toString(5).replace(/\d/g, function(idx) { return sec.charAt(idx); });
		var arr = code.split("");
		img.style.width = (code.length * 3) + "px";
		img.innerHTML = "";
		for(var i = 0; i < arr.length; i++) addTag(arr[i] - 0);
	};
	function addTag(num) {
		var str = num.toString(2) + "0";
		while(str.length < 5) str = "0" + str;
		var arr = str.split("");
		for(var i = 0; i < arr.length; i++) {
			var ele = document.createElement(arr[i] == 0 ? "a" : "b");
			img.appendChild(ele);
		}
	}
}
</script></body></html>

[您可以先修改代码再运行]

原本打算用png实现，但是png结构及算法较复杂，暂时先用html+css+js实现。