您的位置：首页 > 编程技术 > js  >  Javascript实现仿QQ随机数验证

Javascript实现仿QQ随机数验证

 更新时间：2022年5月8日 23:27  点击：1048 作者：mondayes

本文实例为大家分享了Javascript实现仿QQ随机数验证的具体代码，供大家参考，具体内容如下

效果图 

下面是贴出完整代码

<!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">
  <title>Document</title>
 
</head>
<style>
  .wrap {
    width: 800px;
    height: 600px;
    border: 1px solid red;
    position: relative;
  }
 
  .just {
    padding: 10px;
    position: absolute;
    border: 1px solid red;
  }
 
  .garden {
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    position: absolute;
    border: 1px solid blue;
    border-radius: 50%;
  }
</style>
 
<body>
  <div class="wrap">
 
  </div>
</body>
<script>
  var wrap = document.querySelector(".wrap")
  var arr = ["气定神闲", "飞蛾扑火", "高瞻远瞩", "同甘共苦"]
 
  var num = Math.floor(Math.random() * arr.length);
  for (var i = 0; i < arr[num].length; i++) {
    let x = Math.floor(Math.random() * 800) + 1
    let y = Math.floor(Math.random() * 600) + 1
    let div = document.createElement("div");
    div.setAttribute("style", "left:" + x + "px;top:" + y + "px");
    div.classList.add("just")
    div.innerText = arr[num][i]
 
    wrap.appendChild(div)
  }
  var index = 0;
  var str = "";
  wrap.addEventListener("click", (e) => {
    index++
    let x = e.clientX - 17.25;
    let y = e.clientY - 17.25;
    if (e.target.innerText.length == 1) {
      str += e.target.innerText;
      console.log(e.target.innerText);
    } else {
      console.log("无效点击")
    }
 
    let div = document.createElement("div");
    div.setAttribute("style", "left:" + x + "px;top:" + y + "px");
    div.innerText = index
    div.classList.add("garden")
    wrap.appendChild(div)
 
 
    if (index == 4) {
      setTimeout(() => {
        if (str == arr[num]) {
          console.log("验证成功")
          alert("验证成功")
        } else {
          alert("验证失败")
        }
      })
    }
  })
  var newdiv = document.createElement("div")
  newdiv.innerText = "请顺序点击：" + arr[num]
  document.body.appendChild(newdiv)
</script>
 
</html>

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

原文出处：https://blog.csdn.net/tdl2793958525/article/details/10354566

[!--infotagslink--]

相关文章

  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23

  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15

  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25

  • 详解前端安全之JavaScript防http劫持与XSS

    作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24

  • JavaScript仿支付宝密码输入框

    那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签...2016-01-02

  • js+css实现回到顶部按钮（back to top）

    这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03

  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09

  • 一个关于JS正则匹配的踩坑记录

    这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13

  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-20

  • Nest.js参数校验和自定义返回数据格式详解

    这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28

  • node.js如何操作MySQL数据库

    这篇文章主要介绍了node.js如何操作MySQL数据库，帮助大家更好的进行web开发，感兴趣的朋友可以了解下...2020-10-29

  • js屏蔽F12审查元素，禁止修改页面代码等实现代码

    有时候我们需要屏蔽客户端的F12，以防菜鸟也可以随意修改我们的代码，也处于源码的保护等操作，这里就为大家分享一下常见的代码...2020-10-03

  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01

  • js组件SlotMachine实现图片切换效果制作抽奖系统

    这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19

  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11

  • Django def clean()函数对表单中的数据进行验证操作

    这篇文章主要介绍了Django def clean()函数对表单中的数据进行验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-09

  • NodeJS实现阿里大鱼短信通知发送

    本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20

  • js实现文本框输入文字个数限制代码

    这篇文章主要介绍了js实现文本框输入文字个数限制代码，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，如何限制，请看本文...2015-12-27

  • js实现调用网络摄像头及常见错误处理

    这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07

  • JS创建Tag标签的方法详解

    这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15