前端成语点击验证

最新推荐文章于 2024-05-11 16:14:28 发布

UzumakiHan

最新推荐文章于 2024-05-11 16:14:28 发布

阅读量773

点赞数 3

分类专栏： JavaScript html web前端文章标签： html5 验证 javascript

本文链接：https://blog.csdn.net/Hhjian524/article/details/106520006

版权

JavaScript 同时被 3 个专栏收录

93 篇文章 1 订阅

订阅专栏

web前端

52 篇文章 0 订阅

订阅专栏

html

45 篇文章 0 订阅

订阅专栏

首先先看看效果图吧
在这里插入图片描述

需求分析：
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('请点击有效区域')
    }
}

验证成功的效果：
在这里插入图片描述
点击区域不对的效果

验证失败的效果

UzumakiHan

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端成语点击验证

首先先看看效果图吧需求分析：1.随机生成成语，成语的位置随机分布，并渲染在页面上。2.点击文字的有效区域，依次点击，并将点击的文字依次保存在数组中，然后和之前生成的成语进行比较，如果相等，则验证成功，否则验证失败，重新刷新页面。代码实现：首先html的布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c
复制链接

扫一扫