javascript实现前端成语点击验证

网络编程 2024/12/29 佚名

3 2 1

本文实例为大家分享了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">
点击区域不对的效果：

验证失败的效果：

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

js前端成语点击验证,js成语点击验证,js成语验证

标签：

js前端成语点击验证,js成语点击验证,js成语验证

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“javascript实现前端成语点击验证”

javascript实现前端成语点击验证

暂无“javascript实现前端成语点击验证”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

2024年12月29日

javascript实现前端成语点击验证

js前端成语点击验证,js成语点击验证,js成语验证

keep-Alive搭配vue-router实现缓存页面效果的示例代码

vue.js实现双击放大预览功能

评论“javascript实现前端成语点击验证”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接