javascript实现前端成语点击验证优化


Posted in Javascript onJune 24, 2020

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
vue各种事件监听实例(小结)
Jun 24 #Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 #Javascript
javascript实现前端成语点击验证
Jun 24 #Javascript
vue单文件组件无法获取$refs的问题
Jun 24 #Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 #Javascript
javascript实现评分功能
Jun 24 #Javascript
javascript实现移动端红包雨页面
Jun 23 #Javascript
You might like
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
js图片预加载示例
2014/04/30 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
python删除服务器文件代码示例
2018/02/09 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
python自动发微信监控报警
2019/09/06 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
2015年工程部工作总结
2015/04/30 职场文书
工作犯错保证书
2015/05/11 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
谢师宴学生致辞
2015/07/27 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python