前端成语点击验证的优化

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