欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)前端成語(yǔ)點(diǎn)擊驗(yàn)證優(yōu)化

 更新時(shí)間:2020年06月24日 09:22:27   作者:Jeslie-He  
這篇文章主要介紹了javascript實(shí)現(xiàn)前端成語(yǔ)點(diǎn)擊驗(yàn)證優(yōu)化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

對(duì)上一篇前端成語(yǔ)點(diǎn)擊驗(yàn)證博客進(jìn)行優(yōu)化,主要優(yōu)化事項(xiàng)有:

1.點(diǎn)擊時(shí),加上序號(hào)顯示點(diǎn)擊的順序
2.當(dāng)驗(yàn)證成功時(shí),不能再點(diǎn)擊文字。

主要優(yōu)化的代碼如下

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('驗(yàn)證成功!!')
    $('.verify_box').html('驗(yàn)證成功');
    idiomBox.onclick = false //驗(yàn)證成功就不能再點(diǎn)了。
   } else {
    $('.verify_box').html('驗(yàn)證失敗')
    timer = setTimeout(() => {
     location.reload()
    }, 1000);
   }
  }
 } else {
  alert('請(qǐng)點(diǎn)擊有效區(qū)域')
 }
}

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Webpack完整打包流程實(shí)現(xiàn)

    Webpack完整打包流程實(shí)現(xiàn)

    Webpack是當(dāng)下流行的JavaScript靜態(tài)模塊打包器,它能夠處理應(yīng)用中的所有資源文件,并將其打包成瀏覽器兼容的文件,本文就來(lái)介紹一下Webpack完整打包流程實(shí)現(xiàn),感興趣的可以了解一下
    2024-09-09
  • javascript基于原型鏈的繼承及call和apply函數(shù)用法分析

    javascript基于原型鏈的繼承及call和apply函數(shù)用法分析

    這篇文章主要介紹了javascript基于原型鏈的繼承及call和apply函數(shù)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript中繼承的概念、創(chuàng)建方法以及call和apply函數(shù)的功能與使用技巧,需要的朋友可以參考下
    2016-12-12
  • javascript web對(duì)話框與彈出窗口

    javascript web對(duì)話框與彈出窗口

    web對(duì)話框與彈出窗口的js函數(shù)
    2009-02-02
  • JS解密入門(mén)之憑直覺(jué)解

    JS解密入門(mén)之憑直覺(jué)解

    什么叫直覺(jué)解?根據(jù)目前流行的免殺方法,有這么幾種初級(jí)加密方法。進(jìn)制加密,URLEncode加密,加花
    2008-06-06
  • JavaScript中Map與reduce的應(yīng)用小結(jié)

    JavaScript中Map與reduce的應(yīng)用小結(jié)

    Map構(gòu)造函數(shù)創(chuàng)建一個(gè)新Map對(duì)象,它允許以鍵值對(duì)的形式存儲(chǔ)數(shù)據(jù),提供了一種更加靈活的數(shù)據(jù)結(jié)構(gòu),本文給大家介紹JavaScript中Map與reduce的應(yīng)用小結(jié),感興趣的朋友一起看看吧
    2024-06-06
  • Javascript仿PHP $_GET獲取URL中的參數(shù)

    Javascript仿PHP $_GET獲取URL中的參數(shù)

    這篇文章主要介紹了Javascript仿PHP $_GET獲取URL中的參數(shù)代碼實(shí)例,需要的朋友可以參考下
    2014-05-05
  • typescript 將數(shù)組清空的方法實(shí)現(xiàn)

    typescript 將數(shù)組清空的方法實(shí)現(xiàn)

    在開(kāi)發(fā)應(yīng)用程序時(shí),數(shù)組常用于存儲(chǔ)多個(gè)元素(如數(shù)字、字符串、對(duì)象等),然而,在某些場(chǎng)景下,你可能需要將數(shù)組清空,本文主要介紹了typescript 將數(shù)組清空的方法實(shí)現(xiàn),感興趣的可以了解一下
    2024-08-08
  • 深入淺析javascript中的作用域(推薦)

    深入淺析javascript中的作用域(推薦)

    js作用域是前端開(kāi)發(fā)必掌握的基礎(chǔ)知識(shí)。這篇文章主要介紹了javascript中的作用域的相關(guān)資料,需要的朋友可以參考下
    2016-07-07
  • js正則表達(dá)式中exec用法實(shí)例

    js正則表達(dá)式中exec用法實(shí)例

    這篇文章主要介紹了js正則表達(dá)式中exec用法,實(shí)例分析了javascript中使用exec執(zhí)行正則表達(dá)式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-07-07
  • JS前端加密算法示例

    JS前端加密算法示例

    這篇文章主要介紹了JS前端加密算法,結(jié)合實(shí)例形式分析了crypto-js具體用法與注意事項(xiàng),需要的朋友可以參考下
    2016-12-12

最新評(píng)論