日期:2014-05-16  浏览次数:20406 次

前台是个什么东西---JavaScript---一个验证码的小程序


<!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">
        .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]; 
			}
			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 onload="createCode()">
<form  action="#">
     <input  type="text"   id="input1" />
    <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px"  /><br />
    <input id="Button1"  onclick="validate();" type="button" value="确定" /> 
</form>
</body>
</html>
?