javascript实现前端成语点击验证优化
对上一篇前端成语点击验证博客进行优化,主要优化事项有:
1.点击时,加上序号显示点击的顺序
2.当验证成功时,不能再点击文字。
主要优化的代码如下
JS部分:
//事件委托 varverifyArr=[]; varstr=null; vartimer=null; vara=0; varidiomBox=document.querySelector('.idiom_box'); clearTimeout(timer) idiomBox.onclick=function(e){ e.target?e.srcElement:e.target; console.log(e.pageX); console.log(e.offsetX) varradio_left=event.pageX-$(this).offset().left-15+'px'; varradio_top=event.pageY-$(this).offset().top-15+'px' if(e.target.tagName=='SPAN'){ a++; console.log(a) letrad=$(`${a}
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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。