简单的验证码
<!DOCTYPE html>
<html>
<head>
<title>验证码</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
#box{
margin-top: 20px;
width: 200px;
height: 45px;
background-color: #1AF7B2;
line-height: 45px;
text-align: center;
}
input,button{
margin: 5px 0px;
//background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="text" id="input1"name="yanzhen">
<button>确定</button>
</body>
<script type="text/javascript">
$(function(){
function makecode(){
$code=[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'];
$code1=[];
for (var i = 0; i<6; i++) {
var num=Math.floor(Math.random()*36);
$code1[i]=$code[num]
}
$("#box").html($code1[0]+$code1[1]+$code1[2]+$code1[3]+$code1[4]+$code1[5]);
}
makecode();
$("#box").click(function(){
makecode();
})
$("button").eq(0).click(function(){
if($(":input").eq(0).val()==$code1[0]+$code1[1]+$code1[2]+$code1[3]+$code1[4]+$code1[5]){
alert("验证成功！");
}
else{
alert("验证码错误！");
}
})
})
</script>
</html>刚刚看到一个验证码插件，就想到自己做一个简单的。字符颜色和形状都没能实现随机打乱的效果，以后有时间了再完善。能够自己写一些js库是我追求的目标，老师不要笑话哈！