javascript實(shí)現(xiàn)前端成語(yǔ)點(diǎn)擊驗(yàn)證優(yōu)化
對(duì)上一篇前端成語(yǔ)點(diǎn)擊驗(yàn)證博客進(jìn)行優(yōu)化,主要優(yōu)化事項(xiàng)有:
1.點(diǎn)擊時(shí),加上序號(hào)顯示點(diǎn)擊的順序
2.當(dāng)驗(yàn)證成功時(shí),不能再點(diǎn)擊文字。
主要優(yōu)化的代碼如下
JS部分:
//事件委托 var verifyArr = []; var str = null; var timer = null; var a = 0; var idiomBox = document.querySelector('.idiom_box'); clearTimeout(timer) idiomBox.onclick = function (e) { e.target ? e.srcElement : e.target; console.log(e.pageX); console.log(e.offsetX) var radio_left = event.pageX-$(this).offset().left-15+'px'; var radio_top =event.pageY-$(this).offset().top-15+'px' if (e.target.tagName == 'SPAN') { a++; console.log(a) let rad=$(`<div class='radio'>${a}</div>`) rad.css({ left:radio_left, top:radio_top }) $('.idiom_box').append(rad) // 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)證成功'); idiomBox.onclick = false //驗(yàn)證成功就不能再點(diǎn)了。 } else { $('.verify_box').html('驗(yàn)證失敗') timer = setTimeout(() => { location.reload() }, 1000); } } } else { alert('請(qǐng)點(diǎn)擊有效區(qū)域') } }
CSS部分:
.radio{ background-color: #1abd6c; color: #fff; z-index: 9999; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 50%; position: absolute; z-index: 10; line-height: 30px; color: white; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript中條件語(yǔ)句的優(yōu)化技巧總結(jié)
- JS性能優(yōu)化實(shí)現(xiàn)方法及優(yōu)點(diǎn)進(jìn)行
- JS代碼優(yōu)化的8點(diǎn)建議
- JavaScript深入V8引擎以及編寫(xiě)優(yōu)化代碼的5個(gè)技巧
- 通過(guò)循環(huán)優(yōu)化 JavaScript 程序
- js尾調(diào)用優(yōu)化的實(shí)現(xiàn)
- 原生JS實(shí)現(xiàn)圖片懶加載之頁(yè)面性能優(yōu)化
- 淺析JavaScript異步代碼優(yōu)化
- js 性能優(yōu)化之算法和流程控制
- Javascript前端優(yōu)化代碼
相關(guān)文章
javascript基于原型鏈的繼承及call和apply函數(shù)用法分析
這篇文章主要介紹了javascript基于原型鏈的繼承及call和apply函數(shù)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript中繼承的概念、創(chuàng)建方法以及call和apply函數(shù)的功能與使用技巧,需要的朋友可以參考下2016-12-12JavaScript中Map與reduce的應(yīng)用小結(jié)
Map構(gòu)造函數(shù)創(chuàng)建一個(gè)新Map對(duì)象,它允許以鍵值對(duì)的形式存儲(chǔ)數(shù)據(jù),提供了一種更加靈活的數(shù)據(jù)結(jié)構(gòu),本文給大家介紹JavaScript中Map與reduce的應(yīng)用小結(jié),感興趣的朋友一起看看吧2024-06-06Javascript仿PHP $_GET獲取URL中的參數(shù)
這篇文章主要介紹了Javascript仿PHP $_GET獲取URL中的參數(shù)代碼實(shí)例,需要的朋友可以參考下2014-05-05typescript 將數(shù)組清空的方法實(shí)現(xiàn)
在開(kāi)發(fā)應(yīng)用程序時(shí),數(shù)組常用于存儲(chǔ)多個(gè)元素(如數(shù)字、字符串、對(duì)象等),然而,在某些場(chǎng)景下,你可能需要將數(shù)組清空,本文主要介紹了typescript 將數(shù)組清空的方法實(shí)現(xiàn),感興趣的可以了解一下2024-08-08