javascript實現前端成語點選驗證
阿新 • • 發佈：2020-06-24
本文例項為大家分享了javascript實現前端成語點選驗證的具體程式碼，供大家參考，具體內容如下
首先先看看效果圖吧
需求分析：
1.隨機生成成語，成語的位置隨機分佈，並渲染在頁面上。
2.點選文字的有效區域，依次點選，並將點選的文字依次儲存在陣列中，然後和之前生成的成語進行比較，如果相等，則驗證成功，否則驗證失敗，重新重新整理頁面。
程式碼實現：
首先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" rel="external nofollow" > <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：
//建立成語
let idiomArr = ["新春快樂","闔家快樂","恭賀新禧","萬事如意","張燈結綵","恭喜發財","假期愉快","今晚吃雞"];
//獲取隨機打亂的成語
let randomIdiom = idiomArr[Math.floor(Math.random() * (idiomArr.length - 1))];
// console.log(randomIdiom)
$('.verify_box').html(`請依次點選: <span>${randomIdiom}</span>`)
//建立位置的陣列
let placeArr = [
{ left: '0px',top: '0px' },{ left: '200px',{ left: '0px',top: '100px' },top: '100px' }
]
//隨機打亂位置陣列
placeArr.sort(function () {
return Math.random() - 0.5
})
// console.log(placeArr)
//遍歷成語並建立標籤
for (i in randomIdiom) {
let left = Math.floor(Math.random() * 150);
let top = Math.floor(Math.random() * 50);
// console.log(left,top)
//建立存放span的div物件
divs = $('<div class="idiom_content"></div>')
//給div定位
divs.css({
left: placeArr[i].left,top: placeArr[i].top
})
//建立儲存文字的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('請點選有效區域')
}
}驗證成功的效果：
點選區域不對的效果：
驗證失敗的效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。