标签：random demo JavaScript 验证码 text block res var Math
验证码效果图
全部代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.block {
width: 100px;
height: 40px;
border: 1px solid silver;
float: left;
background-image: url("./image/1.png");
background-size: 100px 40px;
overflow: hidden;
}
#kk {
float: left;
color: blue;
font-size: 12px;
position: relative;
top: 28px;
left: 5px;
cursor: pointer;
}
.num {
display: inline-block;
line-height: 40px;
width: 16.5px;
text-align: center;
}
</style>
</head>
<body>
<div>
<div class="block"></div>
<span id="kk">看不清...</span>
</div>
<div style="clear: both">
<input type="text" id="res"/>
<button id="btnres">验证</button>
</div>
<script>
var block = document.getElementsByClassName("block")[0];
var res = ""; //随机产生的数字 做比较
showData();
function showData() {
var ele = ""; //标签
for (var i = 0; i < 6; i++) {
/*产生数字*/
if(Math.random ()<0.4)
{
var number = Math.floor(Math.random() * 10); //产生数字0-9
ele += "<span class='num' style='transform:rotate(" + (Math.random() - 0.5) * 80 + "deg);font-size:" + Math.floor((Math.random() * 8) + 12) + "px;color:rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")'>" + number + "</span>";
res += number;
}
//产生字母
else if(Math.random ()<0.8&&Math.random ()>0.4)
{
var zimu=97+Math.floor(Math.random()*26); //随机产生26个字母的ascii码
var str="";
if(Math.random ()<0.5){
str = String.fromCharCode(zimu).toUpperCase();// ascii码转字母
}
else{
str = String.fromCharCode(zimu).toLowerCase ();// ascii码转字母
}
ele += "<span class='num' style='transform:rotate(" + (Math.random() - 0.5) * 80 + "deg);font-size:" + Math.floor((Math.random() * 8) + 12) + "px;color:rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")'>" + str + "</span>";
res += str;
}
//产生汉字
else
{
var text="昨夜雨疏风骤浓睡不消残酒试问卷帘人却道海棠依旧知否知否应是绿肥红瘦";
var index=Math.floor (Math.random()*text.length);
ele += "<span class='num' style='transform:rotate(" + (Math.random() - 0.5) * 80 + "deg);font-size:" + Math.floor((Math.random() * 8) + 12) + "px;color:rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")'>" + text.charAt (index )+ "</span>";
res += text.charAt (index );
}
}
block.innerHTML = ele;
}
//看不清
var kk = document.getElementById("kk");
kk.onclick = function () {
showData()
};
//验证
var restext=document.getElementById ("res");
var btnres=document.getElementById ("btnres");
btnres.onclick=function (){
if(restext.value.toLowerCase()==res.toLowerCase ()){
alert("验证成功");
}
else{
alert("验证失败");
showData ();
restext.value="";
}
}
</script>
</body>
</html>
标签：random,demo,JavaScript,验证码,text,block,res,var,Math 来源： https://blog.csdn.net/We_jia/article/details/87892393
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。