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 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
jquery form 加载数据示例
Apr 21 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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多用户计数器代码
2007/03/11 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
SVG实现时钟效果
2018/07/17 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
详解python中eval函数的作用
2019/10/22 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
建筑工程专业毕业生自荐信
2013/10/19 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
2015年销售工作总结范文
2015/03/30 职场文书