Javascript实现仿QQ随机数验证
时间：2022-10-08 12:55:36 | 栏目：JavaScript代码 | 点击：次
本文实例为大家分享了Javascript实现仿QQ随机数验证的具体代码，供大家参考，具体内容如下
效果图
下面是贴出完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.wrap {
width: 800px;
height: 600px;
border: 1px solid red;
position: relative;
}
.just {
padding: 10px;
position: absolute;
border: 1px solid red;
}
.garden {
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
position: absolute;
border: 1px solid blue;
border-radius: 50%;
}
</style>
<body>
<div class="wrap">
</div>
</body>
<script>
var wrap = document.querySelector(".wrap")
var arr = ["气定神闲", "飞蛾扑火", "高瞻远瞩", "同甘共苦"]
var num = Math.floor(Math.random() * arr.length);
for (var i = 0; i < arr[num].length; i++) {
let x = Math.floor(Math.random() * 800) + 1
let y = Math.floor(Math.random() * 600) + 1
let div = document.createElement("div");
div.setAttribute("style", "left:" + x + "px;top:" + y + "px");
div.classList.add("just")
div.innerText = arr[num][i]
wrap.appendChild(div)
}
var index = 0;
var str = "";
wrap.addEventListener("click", (e) => {
index++
let x = e.clientX - 17.25;
let y = e.clientY - 17.25;
if (e.target.innerText.length == 1) {
str += e.target.innerText;
console.log(e.target.innerText);
} else {
console.log("无效点击")
}
let div = document.createElement("div");
div.setAttribute("style", "left:" + x + "px;top:" + y + "px");
div.innerText = index
div.classList.add("garden")
wrap.appendChild(div)
if (index == 4) {
setTimeout(() => {
if (str == arr[num]) {
console.log("验证成功")
alert("验证成功")
} else {
alert("验证失败")
}
})
}
})
var newdiv = document.createElement("div")
newdiv.innerText = "请顺序点击：" + arr[num]
document.body.appendChild(newdiv)
</script>
</html>