javascript實現前端成語點選驗證優化
阿新 • • 發佈:2020-06-24
對上一篇前端成語點選驗證部落格進行優化,主要優化事項有:
1.點選時,加上序號顯示點選的順序
2.當驗證成功時,不能再點選文字。
主要優化的程式碼如下
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('驗證成功!!') $('.verify_box').html('驗證成功'); idiomBox.onclick = false //驗證成功就不能再點了。 } else { $('.verify_box').html('驗證失敗') timer = setTimeout(() => { location.reload() },1000); } } } else { alert('請點選有效區域') } }
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; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。