您的位置：首页 > 运维架构 > 网站架构

网站常用验证码效果

2016-09-21 11:18 309 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航