本文实例为大家分享了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">点击区域不对的效果:
验证失败的效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“javascript实现前端成语点击验证”评论...
更新动态
2024年04月29日
2024年04月29日
- PUBG官方确认5月14日回归经典艾伦格地图
- 物华弥新迷踪盘第14关怎么过 迷踪盘第14关通关方法
- 逆水寒手游1.3.2馆藏上新介绍 逆水寒手游馆藏更新了什么
- 物华弥新迷踪盘第1关怎么过 迷踪盘第1关通关方法
- win7没密钥怎么永久激活,w7系统激活密钥一键激活方法
- 怎么安装电脑系统版本,怎么安装电脑的系统
- 苹果电脑wps安装字体,苹果电脑wps怎么设置字体
- 活力美少女!《摇曳露营△》各务原抚子&志摩凛手办
- 《哥斯拉大战金刚2》票房破9亿 观影人次达2100万!
- 全新IP!《寂静岭2:重制版》开发商正在开发两款新作
- FlorilegiumandAshleySolomon-Haydn-SymphoniesNos.6,7,8LeMatin,Lemidi,LeSoir[flac]
- [PTC5186211]花痴系列-柏辽兹-幻想交响曲,Op.14-小泽征尔-波士顿交响乐团iso
- 欧阳菲菲-爱的路上我和你[东尼机构TONYLP-71LP黑胶转录]1977WAV+CUE
- 玩家确认《剑星》实体版可玩未审核版本:需断网安装
- 用火力战胜恐惧!《Backrooms Break》现已正式上线