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:能自主学习是很棒的,考验对知识点的掌握程度,继续保持!完成的不错!