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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS性能优化实现方法及优点进行

    最近刚阅读完<高性能javascript>,想谈谈对js性能优化的看法.理解有些不同,可能还需要各位多多提醒. 话不多说,提到javascript难免会联想到文档对象模型(DOM),它作用于XML和HTML文档的程序接口(API),位于浏览器中,主要用来与HTML文档打交道.同样也用于Web程序中获取XML文档,并使用DOM API来访问文档中的数据.尽管DOM是个与语言无关的API,它在浏览器中的接口却是用javascript实现的.客户端脚本编程大多数时候是在和底层文档(underlyin

  • Javascript前端优化代码

    if 判断的优化 JavaScript条件语句在我们平时的开发中是不可避免要用到的,但是很多时候我们的代码写的并不好,一连串的if-else或者多重嵌套判断都会使得代码很臃肿,下面举例进行优化. 需求:现在有 4 个产品,分别是手机.电脑.电视机.游戏机,当然每个产品显示的价格不一样. 1.最简单的方法:if 判断 let commodity = { phone: '手机', computer: '电脑', television: '电视', gameBoy: '游戏机', } function

  • JavaScript深入V8引擎以及编写优化代码的5个技巧

    概述 JavaScript引擎是执行 JavaScript 代码的程序或解释器.JavaScript引擎可以实现为标准解释器,或者以某种形式将JavaScript编译为字节码的即时编译器. 以为实现JavaScript引擎的流行项目的列表: V8 - 开源,由 Google 开发,用 C ++ 编写 Rhino - 由 Mozilla 基金会管理,开源,完全用 Java 开发 SpiderMonkey - 是第一个支持 Netscape Navigator 的 JavaScript 引擎,目前正

  • JS代码优化的8点建议

    一.松耦合 当修改一个组件而不需要更改其他组件时,就做到了松耦合 1.将JS从CSS中抽离:不要使用CSS表达式 //不好的做法 .box{width: expression(document.body.offsetWidth + 'px')} 2.将CSS从JS中抽离:通过JS修改CSS样式时,使用className或classList,不要逐条修改style样式 //不好的做法一 ele.style.color = 'red'; ele.style.left= '10px'; //不好的做法

  • JavaScript中条件语句的优化技巧总结

    对多个条件使用 Array.includes function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } 上面的例子看起来不错.然而,如果还有更多红颜色的水果需要判断呢,比如樱桃和小红莓,我们要用更多的 ||来扩展这个表述吗? 我们可以用 Array.includes 重写上面的条件! function test(fruit) { const redFruits =

  • 浅析JavaScript异步代码优化

    前言 在实际编码中,我们经常会遇到Javascript代码异步执行的场景,比如ajax的调用.定时器的使用等,在这样的场景下也经常会出现这样那样匪夷所思的bug或者糟糕的代码片段,那么处理好你的Javascript异步代码成为了异步编程至关重要的前提.下面我们从问题出发,一步步完善你的异步代码. 异步问题 1. 回调地狱 首先,我们来看下异步编程中最常见的一种问题,便是回调地狱.它的出现是由于异步代码执行时间的不确定性及代码间的依赖关系引发的,比如: // 一个动画结束后,执行下一个动画,下一个

  • js尾调用优化的实现

    js尾调用优化的实现

    尾调用(Tail Call)是函数式编程的一个重要概念,本文介绍它的含义和用法. 一.什么是尾调用? 尾调用的概念非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数. function f(x){ return g(x); } 上面代码中,函数f的最后一步是调用函数g,这就叫尾调用. 以下两种情况,都不属于尾调用. // 情况一 function f(x){ let y = g(x); return y; } // 情况二 function f(x){ return g(x)

  • 通过循环优化 JavaScript 程序

    前言 对于提高 JavaScript 程序的性能这个问题,最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句.本文将会帮你解决这个问题. 我们将看到 JavaScript 中主要的循环类型,以及如何针对它们进行高效编码. 现在开始! 循环性能 谈到循环性能,争论的焦点始终会集中到关于应该使用哪种循环,哪个是速度最快.性能最好的?事实上,在 JavaScript 提供的四种循环类型中,只有一种比其他循环慢得多 --  for-in 循环. 对循环类型的选择应基于你的需求而不是性能问

  • js 性能优化之算法和流程控制

    js 性能优化之算法和流程控制

    循环处理是最常见的编程模式之一,也是提升性能必须关注的要点之一. 常见的优化方案有: ①JavaScript的四种循环(for.do-while.while.for-in)中,for-in循环比其他几种明显要慢.由于每次迭代操作会同时搜索实例或原型属性,for-in循环的每次迭代都会产生更多的开销,所以比其他类型要慢.因此遍历一个属性数量有限的已知属性列表,可以这样优化: var props = ['prop1', 'prop2'],i = 0; whlie(i < props.length){

  • 原生JS实现图片懒加载之页面性能优化

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果

随机推荐