求一个能实现验证码效果的JS代码

JavaScript013

求一个能实现验证码效果的JS代码,第1张

<html>

<head>

<style type="text/css">

.code{

background-image:url(111.jpg)

font-family:Arial,宋体

font-style:italic

color:green

border:0

padding:2px 3px

letter-spacing:3px

font-weight:bolder

}

.unchanged {

border:0

}

</style>

<script language="javascript" type="text/javascript">

var code //在全局 定义验证码

function createCode(){

code = new Array()

var codeLength = 4//验证码的长度

var checkCode = document.getElementById("checkCode")

checkCode.value = ""

var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z')

for(var i=0i<codeLengthi++) {

var charIndex = Math.floor(Math.random()*32)

code +=selectChar[charIndex]

}

if(code.length != codeLength){

createCode()

}

checkCode.value = code

}

function validate () {

var inputCode = document.getElementById("input1").value.toUpperCase()

if(inputCode.length <=0) {

alert("请输入验证码!")

return false

}

else if(inputCode != code ){

alert("验证码输入错误!")

createCode()

return false

}

else {

alert("成功!")

return true

}

}

</script>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312"></head>

<body onLoad="createCode()">

<input type="text" id="input1" />

<input type="button" id="checkCode" class="code" style="width:60px" onClick="createCode()" /><a href="#" onClick="createCode()">看不清楚</a>

<input id="Button1" onClick="validate()" type="button" value="确定" />

<script></script>

</body>

</html>

你要是的是不是这种效果

最简单的方法你把图一的显示验证码也弄成一个图片,比如叫code.png,上面你的代码就能换成

<img src="code.png" onclick="this.src ={$maccms.path_tpl}picture/captcha.png"

这是在网站的服务器端专门写的一小段程序,用来生成一个随机数(或字母),然后把这个随机数按一定算法绘制成图片,前台请求这个页面时就会显示出这张图了。

绘制成图片的算法不同,看到的图片也就各种各样了