快捷導(dǎo)航

Javascript實現(xiàn)仿QQ隨機數(shù)驗證

更新時間：2022年05月08日 14:04:52 作者：mondayes

這篇文章主要為大家詳細介紹了Javascript實現(xiàn)仿QQ隨機數(shù)驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Javascript實現(xiàn)仿QQ隨機數(shù)驗證的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

下面是貼出完整代碼

<!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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: