DDR爱好者之家

javascript实现前端成语点击验证
站长资源 2024/12/26 佚名
41 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了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="/UploadFiles/2021-04-02/jquery-1.11.0.min.js">


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 "text-align: center">javascript实现前端成语点击验证


点击区域不对的效果：


javascript实现前端成语点击验证


验证失败的效果：


javascript实现前端成语点击验证


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米