Skip to content

Latest commit

 

History

History
200 lines (188 loc) · 4.46 KB

README.md

File metadata and controls

200 lines (188 loc) · 4.46 KB

H5验证码VerificationCode

效果如下：

HTML code:

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<link rel="stylesheet" href="css/details.css"/>
	<title>验证码</title>
</head>
<body>
<div class="ddetails-header">
	<div class="ddetails-con">
		<div class="J_after">
			<input type="hidden"  id="J_down" data-link="'+data.downUrl+'">
			<div class="checkcode">
				<input type="text" id="J_codetext" placeholder="请输入验证码" maxlength="4">
				<canvas class="J_codeimg" id="myCanvas" onclick="createCode()">
					您的浏览器不支持canvas元素。
				</canvas>
			</div>
			<input type="button" value="提交" class="btn-code" onClick="validate();">
			<input type="button" value="取消" class="btn-code btn-no">
		</div>
	</div>
</div>
</body>
</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/index.js"></script>

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();
    }
};