javascript實(shí)現(xiàn)前端成語(yǔ)點(diǎn)擊驗(yàn)證
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)前端成語(yǔ)點(diǎn)擊驗(yàn)證的具體代碼,供大家參考,具體內(nèi)容如下
首先先看看效果圖吧
需求分析:
1.隨機(jī)生成成語(yǔ),成語(yǔ)的位置隨機(jī)分布,并渲染在頁(yè)面上。
2.點(diǎn)擊文字的有效區(qū)域,依次點(diǎn)擊,并將點(diǎn)擊的文字依次保存在數(shù)組中,然后和之前生成的成語(yǔ)進(jìn)行比較,如果相等,則驗(yàn)證成功,否則驗(yàn)證失敗,重新刷新頁(yè)面。
代碼實(shí)現(xiàn):
首先html的布局
<!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"> <link rel="stylesheet" href="./index.css" > <title>點(diǎn)擊成語(yǔ)驗(yàn)證</title> </head> <body> <div class="idiom_box"> <div class="bg_img"></div> </div> <div class="verify_box"></div> <script src="./jquery-1.11.0.min.js"></script> <script src="./index.js"></script> </body> </html>
CSS樣式:
*{ margin: 0; padding: 0; } body{ background-color: #E6E6FA; /* background-size: 100%; */ } .idiom_box{ width: 400px; height: 200px; border: 2px solid #00FFFF; border-radius: 10px; position: relative; margin: 50px auto 0; background-size: 100%; background-repeat: no-repeat; transition: all 2s; overflow: hidden; } .bg_img{ width: 100%; height: 100%; background-image: url(./photo.jpg); background-size: cover; } .idiom_box .idiom_content{ width: 200px; height: 100px; position: absolute; /* background-color: red; */ } .idiom_content span{ font-size: 40px; position: absolute; z-index: 4; color: #EBEBEB; font-weight: bold; transition: all 2s; cursor: pointer; } .idiom_content span:hover{ color: #E0FFFF; font-size: 50px; transition: all 1.5s ease; } .verify_box{ width: 400px; height: 40px; margin: 10px auto 0; border: 1px solid greenyellow; text-align: center; font-size: 26px; line-height: 40px; color: #C71585; font-weight: bold; transition: all 2s; border-radius: 10px; background-color: white; } .verify_box span{ color: #FF7F00; transition: all 2s; }
JS:
//創(chuàng)建成語(yǔ) let idiomArr = ["新春快樂(lè)", "闔家快樂(lè)", "恭賀新禧", "萬(wàn)事如意", "張燈結(jié)彩", "恭喜發(fā)財(cái)", "假期愉快", "今晚吃雞"]; //獲取隨機(jī)打亂的成語(yǔ) let randomIdiom = idiomArr[Math.floor(Math.random() * (idiomArr.length - 1))]; // console.log(randomIdiom) $('.verify_box').html(`請(qǐng)依次點(diǎn)擊: <span>${randomIdiom}</span>`) //創(chuàng)建位置的數(shù)組 let placeArr = [ { left: '0px', top: '0px' }, { left: '200px', top: '0px' }, { left: '0px', top: '100px' }, { left: '200px', top: '100px' } ] //隨機(jī)打亂位置數(shù)組 placeArr.sort(function () { return Math.random() - 0.5 }) // console.log(placeArr) //遍歷成語(yǔ)并創(chuàng)建標(biāo)簽 for (i in randomIdiom) { let left = Math.floor(Math.random() * 150); let top = Math.floor(Math.random() * 50); // console.log(left,top) //創(chuàng)建存放span的div對(duì)象 divs = $('<div class="idiom_content"></div>') //給div定位 divs.css({ left: placeArr[i].left, top: placeArr[i].top }) //創(chuàng)建儲(chǔ)存文字的span標(biāo)簽 span = $(`<span>${randomIdiom[i]}</span>`) //隨機(jī)span的位置 span.css({ left: left + 'px', top: top + 'px' }); divs.append(span); $('.idiom_box').append(divs) } //事件委托 var verifyArr = []; var str = null; var timer = null; var idiomBox = document.querySelector('.idiom_box'); clearTimeout(timer) idiomBox.onclick = function (e) { e.target ? e.srcElement : e.target; if (e.target.tagName == 'SPAN') { // console.log(e.target.innerText); verifyArr.push(e.target.innerText); str = verifyArr.join('') if (str.length === randomIdiom.length) { if (str == randomIdiom) { // alert('驗(yàn)證成功??!') $('.verify_box').html('驗(yàn)證成功') } else { $('.verify_box').html('驗(yàn)證失敗') timer = setTimeout(() => { location.reload() }, 1000); } } } else { alert('請(qǐng)點(diǎn)擊有效區(qū)域') } }
驗(yàn)證成功的效果:
點(diǎn)擊區(qū)域不對(duì)的效果:
驗(yàn)證失敗的效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 就地編輯HTML節(jié)點(diǎn)實(shí)現(xiàn)代碼
JavaScript 就地編輯HTML節(jié)點(diǎn)實(shí)現(xiàn)代碼2009-07-07JS實(shí)現(xiàn)點(diǎn)擊Radio動(dòng)態(tài)更新table數(shù)據(jù)
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊Radio動(dòng)態(tài)更新table數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2017-07-07JavaScript中async/await的高級(jí)用法小結(jié)
JavaScript的異步編程已經(jīng)從回調(diào)(Callback)演進(jìn)到Promise,再到如今廣泛使用的async/await語(yǔ)法,本文為大家整理了7個(gè)async/await高級(jí)用法,希望對(duì)大家有所幫助2023-12-12js從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇js從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09JavaScript Array.flat()函數(shù)用法解析
這篇文章主要介紹了JavaScript Array.flat()函數(shù)用法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09基于JQuery+HTML+JavaScript實(shí)現(xiàn)地圖位置選取和地址模糊查詢
本文詳細(xì)講解了如何使用 JQuery+HTML+JavaScript 實(shí)現(xiàn)移動(dòng)端頁(yè)面中的地圖位置選取功能,本文逐步展示了如何構(gòu)建基本的地圖頁(yè)面,如何通過(guò)點(diǎn)擊地圖獲取經(jīng)緯度和地理信息,以及如何實(shí)現(xiàn)模糊查詢地址并在地圖上標(biāo)注,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-07-07jQuery實(shí)現(xiàn)div浮動(dòng)層跟隨頁(yè)面滾動(dòng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)div浮動(dòng)層跟隨頁(yè)面滾動(dòng)效果,需要的朋友可以參考下2014-02-02