快捷導(dǎo)航

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

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

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

本文實(shí)例為大家分享了Javascript實(shí)現(xiàn)仿QQ隨機(jī)數(shù)驗(yàn)證的具體代碼，供大家參考，具體內(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 = ["氣定神閑", "飛蛾撲火", "高瞻遠(yuǎn)矚", "同甘共苦"]
?
? 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("無效點(diǎn)擊")
? ? }
?
? ? 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("驗(yàn)證成功")
? ? ? ? ? alert("驗(yàn)證成功")
? ? ? ? } else {
? ? ? ? ? alert("驗(yàn)證失敗")
? ? ? ? }
? ? ? })
? ? }
? })
? var newdiv = document.createElement("div")
? newdiv.innerText = "請(qǐng)順序點(diǎn)擊：" + arr[num]
? document.body.appendChild(newdiv)
</script>
?
</html>

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

您可能感興趣的文章:

相關(guān)文章

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