1.生成验证码
2、点击看不清验证码，重新生成
3.进行验证 点击按钮时，进行对对比
<style>
body {
margin: 0;
}
.v_code {
width: 300px;
height: 200px;
border: 1px solid red;
margin: 100px auto;
}
.code {
/*设置验证码*/
font-style: italic;
/*设置字体样式为斜体*/
background-color: #f5f5f5;
/*背景颜色*/
color: blue;
/*文字颜色*/
font-size: 30px;
letter-spacing: 3px;
/*字符间距*/
font-weight: bold;
/* float:left; */
cursor: pointer;
/*手指样式*/
padding: 0 5px;
text-align: center;
}
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
#inputCode {
/*设置文本框的宽高*/
width: 100px;
height: 30px;
}
.v_code>input {
/*文本框设置*/
width: 60px;
height: 36px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="v_code">
<div class="code_show">
<span class="code" id="checkCode"></span>
<!--通过js随机动态改变的-->
<a id="linkbt">看不清换一张</a>
</div>
<div class="input_code">
<label for="inputCode">验证码：</label>
<input type="text" id="inputCode" />
</div>
<input id="Button1" type="button" value="确定" />
</div>
<script>
window.onload = function() {
var res = getCode();
function getCode() {
var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d"];
var str = "";
for (var i = 0; i < 6; i++) {
var num = Math.round(Math.random() * 13);
str += arr[num];
}
return str;
}
document.getElementById("checkCode").innerText = res;
document.getElementById("linkbt").onclick = function() {
document.getElementById("checkCode").innerText = getCode();
};
document.getElementById("Button1").onclick = function() {
var code = document.getElementById("checkCode").innerText;
var inputCode = document.getElementById("inputCode").value;
if (code != inputCode) {
alter("输入的验证码不正确");
document.getElementById("inputCode").value = "";
return false;
} else {
alert("输入的验证码正确");
document.getElementById("inputCode").value = "";
}
}
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
