Posted in Javascript onJune 24, 2020
本文实例为大家分享了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实现前端成语点击验证
- Author -
Jeslie-He声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@