# VerificationCode
**Repository Path**: jsobject/VerificationCode
## Basic Information
- **Project Name**: VerificationCode
- **Description**: H5验证码
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-25
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# H5验证码VerificationCode
效果如下：
HTML code:
```
验证码
```
css code:
```
/*
Style for devices-deatail, latest modified 2015-10-23 15:56
By yanbo
*/
body{
padding: 0;
margin: 0;
border: 0;
color: #585858;
font-size: 14px;
}
h1,h2,ul,li,input{
margin: 0;
padding: 0;
border: none;
list-style:none;
text-decoration: none;
}
.ddetails-header{
width: 100%;
/*height: 507px;*/
height: 700px;
padding-top: 45px;
background: #dff2ff;
}
.ddetails-con{
/*margin:114px auto;*/
margin: 190px auto;
width: 960px;
height: 278px;
}
.btn{
float: left;
display: block;
text-align: center;
text-decoration: none;
list-style: none;
vertical-align: middle;
margin-top: 12px;
margin-right: 21px;
width: 120px;
height: 42px;
line-height: 42px;
background: #008cff;
border-radius: 3px;
color: #fff;
font-size: 16px;
}
/*check-code*/
.checkcode{
float: left;
margin-top: 10px;
width: 182px;
height: 42px;
border: 1px solid #008cff;
border-radius: 3px;
background: #fff;
}
.checkcode input{
float: left;
text-align: center;
width: 85px;
height: 36px;
padding: 3px;
color: #000;
}
.checkcode canvas{
float: right;
width: 85px;
height: 36px;
padding: 3px;
}
.btn-code{
margin-top: 10px;
display: block;
float: left;
width: 95px;
height: 42px;
margin-left: 20px;
background: #008cff;
color: #fff;
border-radius: 3px;
}
.btn-no{
background: none;
border: 1px solid #008cff;
border-radius: 3px;
color: #008cff;
}
.btn:hover{
text-decoration: none;
cursor: pointer;
}
```
javascript code：
```
/*-----------------------------------------------------------------------------
* @Description: 验证码
* @author: yanbo(yanbo@yeah.net)
* @date 2015.09.24
* ---------------------------------------------------------------------------*/
function showCheck(a) { /* 显示验证码图片 */
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 1000, 1000);
ctx.font = "80px Arial";
ctx.fillText(a, 0, 100);
}
var code; //在全局 定义验证码
function createCode() {
code = "";
var codeLength = 4; //验证码的长度
var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
for (var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * 60);
code += selectChar[charIndex];
}
if (code.length != codeLength) {
createCode();
}
showCheck(code);
}
function validate() {
var inputCode = document.getElementById("J_codetext").value.toUpperCase();
var codeToUp = code.toUpperCase();
if (inputCode.length <= 0) {
document.getElementById("J_codetext").setAttribute("placeholder", "请输入验证码");
createCode();
return false;
} else if (inputCode != codeToUp) {
document.getElementById("J_codetext").value = "";
document.getElementById("J_codetext").setAttribute("placeholder", "错误");
createCode();
return false;
} else {
window.open(document.getElementById("J_down").getAttribute("data-link"));
document.getElementById("J_codetext").value = "";
createCode();
return true;
}
}
// download
$(document).ready(function() {
createCode();
});
//为确定按钮添加回车事件
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==13){ // enter 键
validate();
}
};
```