简单的验证码

Original 2018-11-16 18:08:23 230
abstract:<!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库是我追求的目标,老师不要笑话哈!

Correcting teacher:灭绝师太Correction time:2018-11-17 09:21:26
Teacher's summary:能自主学习是很棒的,考验对知识点的掌握程度,继续保持!完成的不错!

Release Notes

Popular Entries