javascript實現(xiàn)前端成語點擊驗證

更新時間：2020年06月24日 09:14:15 作者：Jeslie-He

這篇文章主要介紹了javascript實現(xiàn)前端成語點擊驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)前端成語點擊驗證的具體代碼，供大家參考，具體內(nèi)容如下

首先先看看效果圖吧

需求分析：

1.隨機生成成語，成語的位置隨機分布，并渲染在頁面上。
2.點擊文字的有效區(qū)域，依次點擊，并將點擊的文字依次保存在數(shù)組中，然后和之前生成的成語進行比較，如果相等，則驗證成功，否則驗證失敗，重新刷新頁面。

代碼實現(xiàn)：

首先html的布局

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="./index.css" >
 <title>點擊成語驗證</title>
</head>
<body>
 <div class="idiom_box">
 <div class="bg_img"></div>
 
 </div>
 <div class="verify_box"></div>
 <script src="./jquery-1.11.0.min.js"></script>
 <script src="./index.js"></script>
</body>
</html>

CSS樣式：

*{
 margin: 0;
 padding: 0;
}
body{
 background-color: #E6E6FA; /* background-size: 100%; */
}
.idiom_box{
 width: 400px;
 height: 200px;
 border: 2px solid #00FFFF;
 border-radius: 10px;
 position: relative;
 margin: 50px auto 0;
 background-size: 100%;
 background-repeat: no-repeat;
 transition: all 2s;
 overflow: hidden;
}
.bg_img{
 width: 100%;
 height: 100%;
 background-image: url(./photo.jpg);
 background-size: cover;
}
.idiom_box .idiom_content{
 width: 200px;
 height: 100px;
 position: absolute;
 /* background-color: red; */
}
.idiom_content span{
 font-size: 40px;
 position: absolute;
 z-index: 4;
 color: #EBEBEB;
 font-weight: bold;
 transition: all 2s;
 cursor: pointer;
}
.idiom_content span:hover{
 color: #E0FFFF;
 font-size: 50px;
 transition: all 1.5s ease;
}
.verify_box{
 width: 400px;
 height: 40px;
 margin: 10px auto 0;
 border: 1px solid greenyellow;
 text-align: center;
 font-size: 26px;
 line-height: 40px;
 color: #C71585;
 font-weight: bold;
 transition: all 2s;
 border-radius: 10px;
 background-color: white;
}
.verify_box span{
 color: #FF7F00;
 transition: all 2s;
}

JS：

//創(chuàng)建成語
let idiomArr = ["新春快樂", "闔家快樂", "恭賀新禧", "萬事如意", "張燈結(jié)彩", "恭喜發(fā)財", "假期愉快", "今晚吃雞"];
//獲取隨機打亂的成語
let randomIdiom = idiomArr[Math.floor(Math.random() * (idiomArr.length - 1))];
// console.log(randomIdiom)
$('.verify_box').html(`請依次點擊: <span>${randomIdiom}</span>`)
//創(chuàng)建位置的數(shù)組
let placeArr = [
 { left: '0px', top: '0px' },
 { left: '200px', top: '0px' },
 { left: '0px', top: '100px' },
 { left: '200px', top: '100px' }
]
//隨機打亂位置數(shù)組
placeArr.sort(function () {
 return Math.random() - 0.5
})
// console.log(placeArr)

//遍歷成語并創(chuàng)建標簽
for (i in randomIdiom) {
 let left = Math.floor(Math.random() * 150);
 let top = Math.floor(Math.random() * 50);
 // console.log(left,top)
 //創(chuàng)建存放span的div對象
 divs = $('<div class="idiom_content"></div>')
 //給div定位
 divs.css({
 left: placeArr[i].left,
 top: placeArr[i].top
 })
 //創(chuàng)建儲存文字的span標簽
 span = $(`<span>${randomIdiom[i]}</span>`)
 //隨機span的位置
 span.css({
 left: left + 'px',
 top: top + 'px'
 });
 divs.append(span);
 $('.idiom_box').append(divs)
}
//事件委托
var verifyArr = [];
var str = null;
var timer = null;
var idiomBox = document.querySelector('.idiom_box');
clearTimeout(timer)
idiomBox.onclick = function (e) {
 e.target ? e.srcElement : e.target;
 if (e.target.tagName == 'SPAN') {
 // 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('驗證成功')
  } else {
  $('.verify_box').html('驗證失敗')
  timer = setTimeout(() => {
   location.reload()
  }, 1000);
  }
 }
 } else {
 alert('請點擊有效區(qū)域')
 }
}

驗證成功的效果：