Javascript實(shí)現(xiàn)仿QQ隨機(jī)數(shù)驗(yàn)證
本文實(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("無(wú)效點(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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS生成隨機(jī)數(shù)的多種方法匯總(不同范圍、類型的隨機(jī)數(shù))
- JavaScript中隨機(jī)數(shù)方法?Math.random()
- Js生成隨機(jī)數(shù)/隨機(jī)字符串的方法小結(jié)【5種方法】
- JavaScript隨機(jī)數(shù)的組合問(wèn)題案例分析
- js實(shí)現(xiàn)隨機(jī)數(shù)小游戲
- js控制隨機(jī)數(shù)生成概率代碼實(shí)例
- JavaScript生成指定范圍隨機(jī)數(shù)和隨機(jī)序列的方法
- javaScript產(chǎn)生隨機(jī)數(shù)的用法小結(jié)
- JS隨機(jī)數(shù)產(chǎn)生代碼分享
- JavaScript中獲取隨機(jī)數(shù)的幾種方法小結(jié)
相關(guān)文章
javascript 密碼框防止用戶粘貼和復(fù)制的實(shí)現(xiàn)代碼
本篇文章主要是對(duì)javascript 密碼框防止用戶粘貼和復(fù)制的實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02JavaScript Promise與async/await作用詳細(xì)講解
Promise是異步編程的一種解決方案:從語(yǔ)法上講,promise是一個(gè)對(duì)象,從它可以獲取異步操作的消息;從本意上講,它是承諾,承諾它過(guò)一段時(shí)間會(huì)給你一個(gè)結(jié)果2023-01-01layui實(shí)現(xiàn)根據(jù)table數(shù)據(jù)判斷按鈕顯示情況的方法
今天小編就為大家分享一篇layui實(shí)現(xiàn)根據(jù)table數(shù)據(jù)判斷按鈕顯示情況的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Bootstrap富文本組件wysiwyg數(shù)據(jù)保存到mysql的方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap富文本組件wysiwyg數(shù)據(jù)保存到mysql的方法,感興趣的小伙伴們可以參考一下2016-05-05Typescript學(xué)習(xí)之接口interface舉例詳解
TypeScript是JavaScript的一個(gè)超集,主要提供了類型系統(tǒng)和對(duì)ES6+的支持,TypeScript的核心原則之一是對(duì)值所具有的結(jié)構(gòu)進(jìn)行類型檢查,這篇文章主要給大家介紹了關(guān)于Typescript學(xué)習(xí)之接口interface的相關(guān)資料,需要的朋友可以參考下2024-03-03js截取固定長(zhǎng)度的中英文字符的簡(jiǎn)單實(shí)例
下面是自己寫的一個(gè)簡(jiǎn)單的函數(shù),用于截取固定長(zhǎng)度的字符串,中英文都適用.若有不妥之處還請(qǐng)高手指正2013-11-11