您的位置：首页 > Web前端 > JavaScript

这学期刚学的用javascript实现随机生成验证码过程（非图片验证码）

2013-06-16 09:51 696 查看 


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript脚本语言（动态切换和验证码练习）</title>

<style type="text/css">
*{ margin:0px auto;}
#top{ width:960px;}
#nav{ background-image:url(../image1/login_head.gif); background-repeat:no-repeat; width:360px; height:25px; margin-top:20px; padding-left:20px; color:#FFF; padding-top:3px;}
#main{ width:380px; height:340px; text-align:center; font-size:14px; border:1px #009; background:#09F;}
#qqtop1{ float:left; width:100px; height:18px; padding-top:5px;}
#qqtop2{ width:280px; height:20px; float:right; }

#right{ float:left;}
.font{ color:#F0F;font-size:30px;font-family:微软雅黑; }
</style>

<script type="text/javascript">
function chang(num)
{
if(num==1)
{
document.getElementById("qid").style.display="none";
document.getElementById("qqh").style.display="block";
document.getElementById("qqm").style.display="block";
}else
{
document.getElementById("qid").style.display="block";
document.getElementById("qqh").style.display="none";
document.getElementById("qqm").style.display="none";
}
}
var str="";
function radom()//显示验证码方法
{
var j=new Array("0","1","2","3","8","9","a","b","c","d");

for(var i=0;i<4;i++)
{
var num=parseInt(Math.random()*j.length);
str+=j[num];
}
document.getElementById("yzm").innerHTML=str;
document.getElementById("yzm").className="font";
}

function gb()
{
str="";
radom();
}

function ok()
{
var yzm=document.getElementById("yzm").innerHTML.toUpperCase();
str=document.getElementById("yz").value;
if(yzm==str.toUpperCase())
{
alert("登录成功！");
}else
{
alert("my god!验证码错误，请从新输入！");
gb();
}
}
</script>
</head>

<body onload="radom()">
<div id="top">
<img src="../image1/top.jpg" />
</div>
<div id="nav">
拍拍用户登录
</div>
<div id="main">
<div id="qqtop1">登录方式选择:</div>
<div id="qqtop2">
<input type="radio" name="checd" checked="checked" onclick="chang(1)" />QQ号码登录
<input type="radio" name="checd" onclick="chang(0)" />QQ群号登录
</div><br/>
<div id="qqh" style="margin-top:30px;">
QQ号码：<input type="text" />忘记QQ号码〉〉
</div><br/>
<div id="qid" javascript: style="display:none; padding-right:90px;" >
QQ群Id：<input type="text"  />
</div>
<div id="qqm">
QQ密码：<input type="password" />忘记QQ密码〉〉
</div><br/><br/>
<div  style=" padding-right:90px;" >
验证码：<input type="text" value="请输入下图显示的文字" id="yz" />
</div><br/>
<div id="qqh" style=" padding-right:110px; color:#00F;">
<label onclick="gb()">看不清，换一张</label>
</div><br/>
<div style="height:40px; width:100px; background-color:#03F; padding-top:20px; margin-left:100px;" >
<label id="yzm"></label>
</div><br/>

<input type="button" value="登  录" style="background-color:#03F; padding-top:5px; margin-right:80px; height:30px; width:100px" onclick="ok()" />

</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航