随机验证:随机生产6位数字、汉字、大小写字母并且进行验证;
随机生成数字:
var s = Math.floor(Math.random() * 10);
随机生成汉字:
var string = "中国语言文字网将由教育部语言文字应用研究所主办和运行管理,新网站访问入口更改";
var s = string.charAt(Math.floor(Math.random() * string.length));
随机生产小写字母:
var s = Math.floor(Math.random() * 26 + 97);
str += String.fromCharCode(s);
随机生产大写字母:
var s = Math.floor(Math.random() * 26 + 97);
str += String.fromCharCode(s).toUpperCase();
整体代码
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.str-block {
width: 200px;
height: 50px;
line-height: 50px;
border: 1px solid black;
display: inline-block;
background-image: url("./img/bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
overflow: hidden;
}
.str-block > span {
display: inline-block;
}
.look {
display: inline-block;
color: blue;
font-size: 13px;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div class="str-block">
</div>
<span class="look">看不清楚...</span>
</div>
<input type="text" id="txt"/>
<button id="btn">验证</button>
<script>
/*
* 总共6位
* 随机生成数字0-9
* */
var str = "";
function showchar() {
str = "";
var ele = "";
for (var i = 0; i < 6; i++) {
var gai = Math.random();
if (gai <= 0.25) {
ele += randomnumber();
}
else if (gai > 0.25 && gai <= 0.5) {
ele += randomsmallchar();
}
else if (gai > 0.5 && gai <= 0.75) {
ele += randombigchar();
}
else {
ele += randomhan();
}
}
return ele;
}
//生成随机颜色
function randomColor() {
var c = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
var s = "";
for (var i = 0; i < 6; i++) {
s += c[Math.floor(Math.random() * c.length)];
}
return "#" + s;
}
function randomnumber() {
var s = Math.floor(Math.random() * 10);
str += s;
//生成大小
var font = Math.floor(Math.random() * 25 + 15);
var color = randomColor();
var marleft = Math.floor(Math.random() * 3 + 5);
var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
return "<span style='transform:rotatez(" + angle + "deg);margin:0 " + marleft + "px;font-size: " + font + "px; color:" + color + ";'>" + s + "</span>";
}
function randomsmallchar() {
var s = Math.floor(Math.random() * 26 + 97);
str += String.fromCharCode(s);
var font = Math.floor(Math.random() * 25 + 15);
var color = randomColor();
var marleft = Math.floor(Math.random() * 3 + 5);
var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
return "<span style='transform:rotatez(" + angle + "deg);margin:0 " + marleft + "px;font-size: " + font + "px; color:" + color + ";'>" + String.fromCharCode(s) + "</span>";
}
function randombigchar() {
var s = Math.floor(Math.random() * 26 + 97);
str += String.fromCharCode(s).toUpperCase();
var font = Math.floor(Math.random() * 25 + 15);
var color = randomColor();
var marleft = Math.floor(Math.random() * 3 + 5);
var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
return "<span style='transform:rotatez(" + angle + "deg);margin:0 " + marleft + "px;font-size: " + font + "px; color:" + color + ";'>" + String.fromCharCode(s).toUpperCase() + "</span>";
}
function randomhan() {
var string = "中国语言文字网将由教育部语言文字应用研究所主办和运行管理,新网站访问入口更改";
var s = string.charAt(Math.floor(Math.random() * string.length));
str += s;
var font = Math.floor(Math.random() * 20 + 15);
var color = randomColor();
var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
return "<span style='transform:rotatez(" + angle + "deg);font-size: " + font + "px; color:" + color + ";'>" + s + "</span>";
}
window.onload = function () {
var sblock = document.getElementsByClassName("str-block")[0];
var look = document.getElementsByClassName("look")[0];
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
sblock.innerHTML = showchar();
look.onclick = function () {
sblock.innerHTML = showchar();
}
btn.onclick = function () {
var user = txt.value;
if (user.toLowerCase() == str.toLowerCase()) {
alert("验证成功!")
}
else {
alert("验证失败!");
sblock.innerHTML = showchar();
txt.value = "";
}
}
}
</script>
</body>
</html>