本文实例为大家分享了javascript实现仿QQ随机数验证的具体代码,供大家参考,具体内容如下 效果图 下面是贴出完整代码 <!DOCTYPE html>
本文实例为大家分享了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>
--结束END--
本文标题: Javascript实现仿QQ随机数验证
本文链接: https://www.lsjlt.com/news/148231.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0