javascript实现前端成语点击验证

本文实例为大家分享了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" >

<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', top: '0px' },

{ left: '0px', top: '100px' },

{ left: '200px', 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('请点击有效区域')

}

}

验证成功的效果:

点击区域不对的效果:

验证失败的效果:

以上是 javascript实现前端成语点击验证 的全部内容, 来源链接: utcz.com/z/353719.html

回到顶部