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操作页面表格,元素的一些技巧
Feb 02 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php微信开发之谷歌测距
2018/06/14 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
教学实习自我评价
2014/01/28 职场文书
党员党性分析材料
2014/02/17 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
广告创意求职信
2014/03/17 职场文书
银行职员自我鉴定
2014/04/20 职场文书
作风建设剖析材料
2014/10/06 职场文书
2014年六五普法工作总结
2014/11/25 职场文书