网站常用验证码效果

来源：互联网发布：华为p9手机壳淘宝编辑：程序博客网时间：2024/04/27 14:06

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>换一换</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
body{padding:0;margin:0;}
ul{padding:0;margin:0;}
.box{ width:600px;height: auto;margin:0 auto; }
.box>div{margin-top: 15px;font-size: 18px}
.box .code-box .code{font-size: 22px;color: #f00;}
.box .code-box .huan{font-size: 18px;cursor: pointer;}
.box .input input{width: 200px;height: 28px;}
.button{text-align: center;width: 80px;height: 30px;background: #FF3333;line-height: 30px;color: #fff;cursor: pointer;border-radius: 5px}
.change{color:#f00;font-size:16px;}
</style>
</head>
<body>
<div class="box">
<div class="code-box">
<span>验证码</span>
<span class="code"></span>
<span class="huan">换一张</span>
</div>
<div class="input">
<span>输入验证码</span>
<input type="text" id="code" placeholder="输入验证码">
<span class="change"></span>
</div>
<div class="button">提交</div>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".huan").on("click",createCode)
$(".button").on("click",validation)
createCode()//一打开页面就先加载一张验证码出来

})

var code1;

function createCode(){
var l=4;
var code1='';
for(var i=0;i<l;i++){

var mynum =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');
var charindex=Math.floor(Math.random()*mynum.length);

code1+=mynum[charindex];
$(".code").html(code1);
}


}
function validation(){
var code=$(".code").html();

var Code=$("#code").val();

if(Code.length<=0){
$(".change").show().html("验证码为空");
}else if(Code !=code && Code.length>0){
$(".change").show().html("验证码有误");
createCode();
}else{
$(".change").show().html("验证码正确");
}
$("#code").focus(function(){
$(".change").html("");
$(this).val('');
})
}
</script>
</body>
</html>

0 0