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;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。