如何通过JavaScript优化前端成语点击验证功能？

本文共计465个文字，预计阅读时间需要2分钟。

对上一篇前端成语言点点击验证博客进行优化，主要优化事项包括：

1.点击时，增加序号显示点击顺序；

2.验证成功时，禁止再次点击文字。

主要优化的代码如下（JS部分）：

javascript// 事件委托var verify=document.getElementById('verify');verify.addEventListener('click', function(event) { if (event.target.tagName==='SPAN') { // 增加序号 var order=this.getAttribute('data-order') || 0; order++; this.setAttribute('data-order', order); this.textContent='点击顺序：' + order;

// 验证成功后禁止点击 if (this.classList.contains('success')) { this.style.pointerEvents='none'; } }});

对上一篇前端成语点击验证博客进行优化，主要优化事项有：

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; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。