Javascript实现仿QQ随机数验证

来源：jb51　　时间：2022/5/9 9:43:56　　对本文有异议

本文实例为大家分享了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>