前端开发者web前端开发职业技能|杭州西湖前端开发招聘|ui前端开发框架有哪些
html 代码
<!doctype html>
<html>
<meta charset=”utf-8″>
<head runat=”server”>
<title>前端 开发环境:验证码</title>
<style>
.v_code {
width: 600px;
margin: 0 auto;
}
.v_code>input {
width: 60px;
height: 36px;
margin-top: 10px;
}
.code_show {
overflow: hidden;
}
.code_show span {
display: block;
float: left;
margin-bottom: 10px;
}
.code_show a {
display: block;
float: left;
margin-top: 10px;
margin-left: 10px;
}
.code {
font-style: italic;
background-color: #f5f5f5;
color: blue;
font-size: 30px;
letter-spacing: 3px;
font-weight: bolder;
float: left;
cursor: pointer;
padding: 0 5px;
text-align: center;
}
#inputCode {
width: 100px;
height: 30px;
}
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
</style>
<script>
window.onload = function () {
checkCode();
}
var code;
function createCode() {
code = “”;
var codeLength = 6; //验证码的长度
var checkCode = document.getElementById(“checkCode”);
var codeChars = 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’,
‘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 charNum = Math.floor(Math.random() * 52);
code += codeChars[charNum];
}
if (checkCode) {
checkCode.className = “code”;
checkCode.innerHTML = code;
}
}
function validateCode() {
var inputCode = document.getElementById(“inputCode”).value;
var textShow = document.getElementById(“text_show”)
if (inputCode.length <= 0) {
textShow.innerHTML = “请输入验证码”;
textShow.style.color = “red”;
} else if (inputCode.toUpperCase() != code.toUpperCase()) {
textShow.innerHTML = “您输入的验证码有误”;
textShow.style.color = “red”;
createCode();
} else {
textShow.innerHTML = “验证码正确”;
textShow.style.color = “green”;
}
}
function checkCode() {
var btn = document.getElementById(“Button1”);
btn.onclick = function () {
validateCode();
}
}
</script>
</head>
<body onload=”createCode()”>
<div class=”v_code”>
<div class=”code_show”>
<span class=”code” id=”checkCode” onclick=”createCode()”></span>
<a onclick=”createCode()”>看不清换一张</a>
</div>
<div class=”input_code”>
<label for=”inputCode”>验证码：</label>
<input type=”text” id=”inputCode” onblur=”validateCode();” />
<span id=”text_show”></span>
</div>
<input id=”Button1″ type=”button” value=”确定” />
</div>
</body>
</html>
对前端开发的框架|前端模块化开发|开发前端模板引擎
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册