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 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
vue开发中遇到的问题总结
Apr 07 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 imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP中读写文件实现代码
2011/10/20 PHP
javascript 对象的定义方法
2007/01/10 Javascript
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
js比较日期大小的方法
2015/05/12 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
揭牌仪式策划方案
2014/05/28 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
田径运动会通讯稿
2014/09/13 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android