当前位置:首页 > Javascript 验证码

Javascript 验证码

点击次数:1454  更新日期:2011-01-05
\n

需要用到验证码,突然想能否用js做验证码呢? 当然js不能作图,但是可以用js模拟做验证码的,于是花了20分钟按照我的想法尝试做,最后做出来比我想象中的效果还要好,呵呵
先贴个图看看

代码:

<!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>
<style type=”text/css”>


\n

.code
{
background-image:url(code.jpg);
font-family:Arial;
font-style:italic;
color:Red;
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 = “”;
var codeLength = 6;//验证码的长度
var checkCode = document.getElementById(“checkCode”);
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,’A\',’B\',’C\',’D\',’E\',’F\',’G\',’H\',’I\',’J\',’K\',’L\',’M\',’N\',’O\',’P\',’Q\',’R\',’S\',’T\',’U\',’V\',’W\',’X\',’Y\',’Z\');//所有候选组成验证码的字符,当然也可以用中文的

for(var i=0;i<codeLength;i++)
{


var charIndex = Math.floor(Math.random()*36);
code +=selectChar[charIndex];


}
// alert(code);
if(checkCode)
{
checkCode.className=”code”;
checkCode.value = code;
}

}

function validate ()
{
var inputCode = document.getElementById(“input1″).value;
if(inputCode.length <=0)
{
alert(“请输入验证码!”);
}
else if(inputCode != code )
{
alert(“验证码输入错误!”);
createCode();//刷新验证码
}
else
{
alert(“^-^ OK”);
}

}
</script>
</head>
<body>
<form action=”#”>
<input type=”text” onclick=”createCode()” id=”input1″ />

<input type=”text” id=”checkCode” class=”unchanged” style=”width: 80px” /><br />
<input id=”Button1″ onclick=”validate();” type=”button” value=”确定” />
</form>
</body>
</html>

呵呵,高手看了还望别笑话,仅仅是为了练习而做着玩的 (:
解释就不用说了,大家看注释应该就很清楚了
其实那个用来混淆文字的背景图只是在文字下方加了个背景图,验证码还是不能防止Copy的,所以基本是不能当真正的验证码用的。
这里设计到我最近学习js&css中的一些东西,呵呵,练习,学习,进步~

来源:cnblogs

\n