<!DOCTYPE html> |
<html lang= "en" > |
<head> |
<meta charset= "UTF-8" > |
<title>Document</title> |
<style type= "text/css" > |
#checkCode { |
font-family: Arial; |
font-style: italic; |
font-weight: bold; |
border: 0; |
letter-spacing: 2px; |
color: blue; |
} |
</style> |
</head> |
<body> |
<div> |
<input type= "text" id= "input" /> |
<input type= "button" id= "checkCode" onclick= "createCode()" /> |
<input type= "button" value= "验证" onclick= "validate()" /> |
</div> |
</body> |
<script type= "text/javascript" > |
// checkCode.js |
|
var code; //在全局定义验证码 |
//产生验证码 |
window.onload = function () { |
createCode(); |
} |
function createCode() { |
code = "" ; |
var codeLength = 4; //验证码的长度 |
var checkCode = document.getElementById( "checkCode" ); |
var random = 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' ); //随机数 |
for ( var i = 0; i < codeLength; i++) { //循环操作 |
var charIndex = Math.floor(Math.random() * 36); //取得随机数的索引 |
code += random[charIndex]; //根据索引取得随机数加到code上 |
} |
checkCode.value = code; //把code值赋给验证码 |
} |
//校验验证码 |
function validate() { |
var inputCode = document.getElementById( "input" ).value.toUpperCase(); //取得输入的验证码并转化为大写 |
if (inputCode.length <= 0) { //若输入的验证码长度为0 |
alert( "请输入验证码!" ); //则弹出请输入验证码 |
} else if (inputCode != code) { //若输入的验证码与产生的验证码不一致时 |
alert( "验证码输入错误!" ); //则弹出验证码输入错误 |
createCode(); //刷新验证码 |
} else { //输入正确时 |
alert( "^-^" ); //弹出^-^ |
} |
} |
</script> |
</html> |
初级程序员
by: 云代码会员 发表于:2019-12-29 16:15:03 顶(1) | 踩(0) 回复
还行
回复评论