在这个地方我简单的做了一个网页验证码的实现,这个验证是对应的四位的数字,是由随机数产生,然后然后让用户在输入数字进行对比。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wide
{
background: url(image/knx.jpg);
background: pink;
opacity: 0.5;
width: 80px;
height: 35px;
font-weight: bold;
letter-spacing:6px;
font-family: 华文楷体;
font-size: 1.4em;
line-height: 35px;
text-align: center;
position: absolute;
left:150px;
}
#veri
{
position: absolute;
width: 80px;
height: 30px;
font-size: 1.3em;
}
</style>
</head>
<script>
window.onload=function(){
var pos=document.getElementById("rand");
var inp1=document.getElementById("veri");
var Num=GetRandomNum(1000,9999);
pos.innerHTML=Num;
var wide=document.getElementById("wide");
wide.onclick=function()
{
Num=GetRandomNum(1000,9999);
pos.innerHTML=Num;
};
inp1.onblur=function(){
verification(inp1,Num);
}

}
function GetRandomNum(Max,Min)
{
var Range=Max-Min;
var Rand=Math.random();
return parseInt((Min+Rand*Range));
}
function verification(inp1,num)
{

if(parseInt(inp1.value)==num)
{
return true;

}
else if(inp1.value.length==0)
{
alert("请输入验证码");

}
else
{
alert("验证码输入错误");
return false;
}
}
</script>
<body>
<input type="text" id="veri" placeholder="验证码"/>
<div id="wide">
<div id="rand"></div>
</div>
</body>
</html>