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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
獲取圖片尺寸(不設(shè)置寬高)及放大圖片：利用了IE的私有屬性防止圖片放大失真嚴重！感興趣的朋友可以參考下2013-09-09
JavaScript中的強制類型轉(zhuǎn)換包括顯式和隱式轉(zhuǎn)換,涉及字符串、數(shù)字和布爾值三種基本類型,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
這篇文章主要介紹了微信小程序批量上傳圖片到七牛,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了原生JS實現(xiàn)的雙色球功能,涉及javascript隨機數(shù)生成及數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
利用JS判斷字符串是否含有數(shù)字與特殊字符的方法小結(jié)
在我們?nèi)粘９ぷ鞯臅r候，利用javaScript判斷一個字符串中是否包括有數(shù)字和"-"，在一些表單提交的地方，這是比較有用的常規(guī)判斷，這里收集有幾種不同的方法，最后還將簡要介紹下isNAN函數(shù)的使用方法和例子，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11
本文主要介紹了JavaScript中的parseInt()的妙用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
下面小編就為帶來一篇js導(dǎo)出excel文件的簡潔方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JavaScript超詳細實現(xiàn)網(wǎng)頁輪播圖
這篇文章主要介紹了JavaScript超詳細實現(xiàn)網(wǎng)頁輪播圖,我們經(jīng)常會看到各種輪播圖的效果，它們到底是怎樣實現(xiàn)的呢？今天我們就一起來看一下具體實現(xiàn)方法吧2021-12-12
JS 巧妙獲取剪貼板數(shù)據(jù) Excel數(shù)據(jù)的粘貼
最近需要在瀏覽器端實現(xiàn)excel數(shù)據(jù)的粘貼，一開始去找獲取剪貼板數(shù)據(jù)的方法。但是在瀏覽器端，JS去取是受安全限制的。2009-07-07
不管什么樣的編程語言,在代碼的執(zhí)行過程中都是需要給它分配內(nèi)存的,下面這篇文章主要給大家介紹了關(guān)于JavaScript內(nèi)存管理與閉包的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06