html5点击刷新验证码特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5点击刷新验证码特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="details.css" rel="stylesheet" type="text/css" />
<title>html5点击刷新验证码特效</title>
</head>
<body>

<div class="ddetails-header">
	<div class="ddetails-con">
		<div class="J_before">
			<input type="button" value="Click" class="btn J_download">
		</div>
		<div class="J_after" style="display:none;">
			<input type="hidden"  id="J_down" data-link="#">
			<div class="checkcode">
				<input type="text" id="J_codetext" placeholder="Type Here" maxlength="4">
				<canvas class="J_codeimg" id="myCanvas" onclick="createCode()">
					Your browser does not support the canvas element.
				</canvas>
			</div>
			<input type="button" value="Submit" class="btn-code" onClick="validate();">
			<input type="button" value="Cancel" class="btn-code btn-no">
		</div>
	</div>
</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

JS代码(index.js):

/*-----------------------------------------------------------------------------* @Description:楠岃瘉鐮?* @author:xuyihong(xuyihong@163.com)* @date2015.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","Type Here");
	createCode();
	return false;
}
else if(inputCode != codeToUp ){
	document.getElementById("J_codetext").value="";
	document.getElementById("J_codetext").setAttribute("placeholder","Error");
	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(){
	$(".J_download").bind("click",function(){
	$(".J_before").hide(40);
	$(".J_after").show(200);
	createCode();
}
);
	$(".btn-no").bind("click",function(){
	$(".J_after").hide(40);
	$(".J_before").show(200);
}
);
}
)//涓虹‘瀹氭寜閽坊鍔犲洖杞︿簨浠?// document.onkeydown=function(event){
	// var e = event || window.event || arguments.callee.caller.arguments[0];
	// if(e && e.keyCode==13){
	// enter 閿?// validate();
	//}
//}
;

CSS代码(details.css):

/* Style for devices-deatail,latest modified 2015-10-23 15:56 By Xu yihong*/
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;}

附件:下载该文件资源,减少时间成本(增值服务)