<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>JS验证码</title>
<style type="text/css">
.code {
background-image: url(code.jpg);
font-family: Arial;
font-style: italic;
color: Red;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
}
.unchanged {
border: 0;
}
</style>
<script language="javascript" type="text/javascript">
var code; //在全局 定义验证码
function createCode() {
code = "";
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode");
var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);//所有候选组成验证码的字符,当然也可以用中文的
for (var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * 10);
code += selectChar[charIndex];
}
// alert(code);
if (checkCode) {
checkCode.className = "code";
checkCode.value = code;
}
}
function validate() {
var inputCode = document.getElementById("input1").value;
if (inputCode.length <= 0) {
alert("请输入验证码!");
}
else if (inputCode != code) {
alert("验证码输入错误!");
createCode();//刷新验证码
}
else {
alert("OK");
}
}
</script>
</head>
<body onload="createCode()">
<form action="#">
<input type="text" id="input1" />
<input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged"
style="width: 80px" /><br />
<input id="Button1" onclick="validate();" type="button" value="确定" />
</form>
</body>
</html>
代码如上,可以自己稍微修改一下样式。
如遇到样式修改问题欢迎追问,满意请采纳哦。
这个验证码百度一大把。。
您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~
ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632