对上一篇前端成语点击验证博客进行优化，主要优化事项有：前端成语点击验证博客进行优化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=$(``)

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('请点击有效区域')
}
}
//事件委托
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=$(``)

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;
}
.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;
}以上就是本文的全部内容，希望对大家的学习有所帮助。