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;
}
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('请点击有效区域')
}
}
验证成功的效果：
点击区域不对的效果：
验证失败的效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS验证控制输入中英文字节长度(input、textarea等)具体实例
检查表单是否符合规定的长度.最长允许n个字符(中文算2位)! 复制代码 代码如下: function fucCheckLength(strTemp) { var i,sum; sum=0; for(i=0;i<strTemp.length;i++) { if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255)) { sum=sum+1; }else { sum=
-
JS验证逗号隔开可以是中文字母数字
废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> var refid='dasdasd,dadsad'; var reg =/^([\u0391-\uFFE5\d\w,])*([\u0391-\uFFE5\d\w]+)$/; if(refid != "") { if(reg.exec(refid)) { alert('验证通过'); }else { alert('验证失败'); } }
-
JS正则表达式验证中文字符
正则表达式:"^[\u4e00-\u9fa5]{0,}$" . "/^[\u4E00-\u9FA5]{1,5}$/" 的含义: 在JS里,\uXXXX 是转义字符,"XXXX"对应的是16进制Unicode编码: ^ 匹配一行的开始.例如正则表达式^123能够匹配字符串"12345"的开始,但是不能匹配"012345": [\u4e00-\u9fa5] 指匹配在这两个Unicode编码之间的字符; {0,}
-
javascript实现前端成语点击验证
本文实例为大家分享了javascript实现前端成语点击验证的具体代码,供大家参考,具体内容如下 首先先看看效果图吧 需求分析: 1.随机生成成语,成语的位置随机分布,并渲染在页面上. 2.点击文字的有效区域,依次点击,并将点击的文字依次保存在数组中,然后和之前生成的成语进行比较,如果相等,则验证成功,否则验证失败,重新刷新页面. 代码实现: 首先html的布局 <!DOCTYPE html> <html lang="en"> <head> <
-
javascript实现前端成语点击验证优化
对上一篇前端成语点击验证博客进行优化,主要优化事项有: 1.点击时,加上序号显示点击的顺序 2.当验证成功时,不能再点击文字. 主要优化的代码如下 JS部分: //事件委托 var verifyArr = []; var str = null; var timer = null; var a = 0; var idiomBox = document.querySelector('.idiom_box'); clearTimeout(timer) idiomBox.onclick = functi
-
JavaScript架构前端监控搭建过程步骤
目录 前言 采集阶段:要采集哪些数据? 前端异常 接口异常 行为数据 API 阶段:搭建上报数据的 API 接口 数据存储阶段:接口对接数据库 查询统计阶段:数据查询和统计分析 可视化阶段:最终的数据图表展现 报警阶段:发现异常马上报警通知 部署阶段:万事俱备只等上线 总结 前言 上一篇介绍了,前端为什么要有监控系统?前端监控系统的意义何在?有小伙伴看完后留言想听些详细的实现.那么本篇我们就开始介绍前端监控如何实现. 如果还不明白为什么,搞监控有什么用,建议先看上篇文章:为什么前端不能没有监控系
-
基于JavaScript实现前端文件的断点续传
还是先以图片为例,看看最后的样子 一.一些知识准备 断点续传,既然有断,那就应该有文件分割的过程,一段一段的传. 以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割,我们可以可以使用slice方法来分割文件. 所以断点续传的最基本实现也就是:前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接. 而我们需要对FileList对象进行修改再提交,在之前的文章中知晓了这种提交的一些注意点,因为F
-
使用Javascript监控前端相关数据的代码
本篇文章介绍了Javascript监控前端相关数据,项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统. 所以我们需要做以下的一些模块: 一.收集脚本执行错误 function error(msg,url,line){ var REPORT_URL = "xxxx/cgi"; // 收集上报数据的信息 var m =[msg, url, line, navigator.userAgent, +new Dat
-
javascript实现前端分页效果
本文实例为大家分享了javascript实现前端分页效果的具体代码,供大家参考,具体内容如下 需求:实现分页请求表格数据,ajax暂时没写,只写了分页的功能. 效果图: 当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态 各个按钮都正常的状态 当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态 各部分的代码如下: html部分: <!-- 分页 --> <div class="pageBox"> <div class="pageT
-
javascript解锁前端密码框常见功能做法
目录 前言 显示隐藏密码明文 1.用到的图片素材 2.代码 3.结果演示 密码框验证信息 1.用到的图片素材 2.代码 3.结果演示 结语 前言 学前端最基本的登录页面肯定要会写,那登录页面里面的密码框的功能设计就需要好好打磨,主要功能有显示密码明文,密码检测信息提示等等,那么本篇博客将写写这些功能结合js怎么做,很简单,看一下就会了. 显示隐藏密码明文 1.用到的图片素材 2.代码 <!DOCTYPE html> <html lang="en"> <he
-
Vue前端登录token信息验证功能实现
用户在首次访问网站时,应在登录页面填写账号密码,前端携带用户信息向服务器请求. 1.服务器验证用户信息 验证失败:给前端响应数据 验证通过:对该用户创建token,并以响应数据返回给前端 2.前端接受后端响应的数据 错误信息:提示错误消息 正确信息:页面进行跳转至首页,同时保存token(可以保存在cookie或localstorage) 3.用户点击某功能模块的触发请求(比如某功能有权限设置或是是否需要token) 利用路由守卫beforeEach() 将保存的token添加至请求拦截器的请求
-
JavaScript常用的正则表达式表单验证代码
常用的正则表达式如下: 复制代码 代码如下: "^-?[1-9]\\d*$", //整数 "^[1-9]\\d*$", //正整数 "^-[1-9]\\d*$", //负整数 "^([+-]?)\\d*\\.?\\d+$", //数字 "^[1-9]\\d*|0$", //正数(正整数 + 0) "^-[1-9]\\d*|0$", //负数(负整数 + 0) "^([+-]?)
-
javascript设计模式--策略模式之输入验证
策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 先定义一个简单的输入表单: <!DOCTYPE html> <html> <head> <meta charset="utf-"> <style> .form{ width: px; height: px; #margin: px auto; } .form-item-label{ width:px; text-align: