javascript实现前端成语点击验证


Posted in Javascript onJune 24, 2020

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

验证成功的效果:

javascript实现前端成语点击验证

点击区域不对的效果:

javascript实现前端成语点击验证

验证失败的效果:

javascript实现前端成语点击验证

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 #Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 #Javascript
javascript实现评分功能
Jun 24 #Javascript
javascript实现移动端红包雨页面
Jun 23 #Javascript
JS实现canvas简单小画板功能
Jun 23 #Javascript
javascript+Canvas实现画板功能
Jun 23 #Javascript
vue.js实现照片放大功能
Jun 23 #Javascript
You might like
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
JS中==、===你分清楚了吗
2020/03/04 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python简单的制作图片验证码实例
2017/05/31 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Python Web版语音合成实例详解
2019/07/16 Python
超简单的Python HTTP服务
2019/07/22 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python标准库OS模块详解
2020/03/10 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
敬老文明号事迹材料
2014/01/16 职场文书
安全先进班组材料
2014/12/26 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
聘任书范文大全
2015/09/21 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python