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-02
JavaScript Promise與async/await作用詳細(xì)講解
Promise是異步編程的一種解決方案:從語(yǔ)法上講,promise是一個(gè)對(duì)象,從它可以獲取異步操作的消息;從本意上講,它是承諾,承諾它過(guò)一段時(shí)間會(huì)給你一個(gè)結(jié)果2023-01-01
layui實(shí)現(xiàn)根據(jù)table數(shù)據(jù)判斷按鈕顯示情況的方法
今天小編就為大家分享一篇layui實(shí)現(xiàn)根據(jù)table數(shù)據(jù)判斷按鈕顯示情況的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
Bootstrap富文本組件wysiwyg數(shù)據(jù)保存到mysql的方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap富文本組件wysiwyg數(shù)據(jù)保存到mysql的方法,感興趣的小伙伴們可以參考一下2016-05-05
Typescript學(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-03
js截取固定長(zhǎng)度的中英文字符的簡(jiǎn)單實(shí)例
下面是自己寫的一個(gè)簡(jiǎn)單的函數(shù),用于截取固定長(zhǎng)度的字符串,中英文都適用.若有不妥之處還請(qǐng)高手指正2013-11-11

