javascript实现前端成语点击验证

时间：2021-05-26

本文实例为大家分享了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; }.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; }.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('请点击有效区域') }}

验证成功的效果：

点击区域不对的效果：

验证失败的效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章