|
html+css+javascript简易实现注册或登录时实现验证码功能：
原文链接：https://blog.csdn.net/weixin_41472431/article/details/90732468
<!DOCTYPE HTML>
<html>
<head>
<title>注册模块</title>
<meta charset="utf-8">
<style>
#vcode {
height: 35px;
width: 40%;
font-size: 15pt;
margin-left: 15%;
border-radius: 5px;
border: 1;
padding-left: 8px;
}
#code {
color: #ffffff;
background-color: #000000;
font-size: 20pt;
font-family: "华康娃娃体W5";
padding: 5px 35px 10px 35px;
margin-left: 5%;
cursor: pointer;
}
#search_pass_link {
width: 70%;
text-align: right;
margin: 0 auto;
padding: 5px;
}
.btns {
width: 30%;
margin-left: 13%;
height: 40px;
border: 0;
font-size: 14pt;
font-family;
"微软雅黑";
background-color: #FC5628;
color: #ffffff;
cursor: pointer;
border-radius: 20px;
border: 0;
}
</style>
</head>
<body leftmargin="0" onload="changeImg()">
<div class="main_bar">
<form action="login.html" onsubmit="return check()">
<input type="text" id="vcode" placeholder="验证码" value="验证码" onfocus="this.value=''" onblur="if(this.value=='')this.value='验证码'" /><span id="code" title="看不清，换一张"></span>
<div id="search_pass_link">
</div>
<input type="submit" id="submit" value="登录" class="btns" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'">
<input type="reset" value="取消" class="btns" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'">
</form>
</div>
</body>
<script type="text/javascript">
var code;
document.getElementById("code").onclick = changeImg;
function changeImg() {
var arrays = new Array(
'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
'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',
'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'
);
code = '';
for(var i = 0; i < 4; i++) {
var r = parseInt(Math.random() * arrays.length);
code += arrays[r];
}
document.getElementById('code').innerHTML = code;
}
function check() {
var input_code = document.getElementById('vcode').value;
if(input_code.toLowerCase() == code.toLowerCase()) {
return true;
}
alert("请输入正确的验证码!");
return false;
}
</script>
</html>
|