摘要:<!DOCTYPE html> <html> <head> <title>验证码</title> <meta charset="utf-8"> <script type="text/javascript" src="jquer
<!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库是我追求的目标,老师不要笑话哈!
批改老师:灭绝师太批改时间:2018-11-17 09:21:26
老师总结:能自主学习是很棒的,考验对知识点的掌握程度,继续保持!完成的不错!