JavaScript实现前端成语点击验证功能

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

JavaScript逻辑部分：

//创建成语
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('请点击有效区域')
 }
}

验证成功时的页面效果：

点击区域不正确时的反馈：

验证失败时的页面提示：

以上就是本文的全部内容，希望能为读者的学习提供一定帮助，也欢迎大家继续支持本站。