脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js随机数验证

Javascript实现仿QQ随机数验证

 更新时间：2022年05月08日 14:04:52   作者：mondayes  
这篇文章主要为大家详细介绍了Javascript实现仿QQ随机数验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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

您可能感兴趣的文章:

相关文章

  • javascript 获取图片尺寸及放大图片

    javascript 获取图片尺寸及放大图片

    获取图片尺寸(不设置宽高)及放大图片：利用了IE的私有属性防止图片放大失真严重！感兴趣的朋友可以参考下
    2013-09-09
  • 深入理解JavaScript强制类型转换

    深入理解JavaScript强制类型转换

    JavaScript中的强制类型转换包括显式和隐式转换,涉及字符串、数字和布尔值三种基本类型,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-09-09
  • 微信小程序批量上传图片到七牛(推荐)

    微信小程序批量上传图片到七牛(推荐)

    这篇文章主要介绍了微信小程序批量上传图片到七牛,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-12-12
  • 原生JS实现的双色球功能示例

    原生JS实现的双色球功能示例

    这篇文章主要介绍了原生JS实现的双色球功能,涉及javascript随机数生成及数值运算相关操作技巧,需要的朋友可以参考下
    2018-02-02
  • 利用JS判断字符串是否含有数字与特殊字符的方法小结

    利用JS判断字符串是否含有数字与特殊字符的方法小结

    在我们日常工作的时候，利用javaScript判断一个字符串中是否包括有数字和"-"，在一些表单提交的地方，这是比较有用的常规判断，这里收集有几种不同的方法，最后还将简要介绍下isNAN函数的使用方法和例子，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-11-11
  • 浅谈JavaScript中的parseInt()的妙用

    浅谈JavaScript中的parseInt()的妙用

    本文主要介绍了JavaScript中的parseInt()的妙用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • js导出excel文件的简洁方法(推荐)

    js导出excel文件的简洁方法(推荐)

    下面小编就为带来一篇js导出excel文件的简洁方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JavaScript超详细实现网页轮播图

    JavaScript超详细实现网页轮播图

    这篇文章主要介绍了JavaScript超详细实现网页轮播图,我们经常会看到各种轮播图的效果，它们到底是怎样实现的呢？今天我们就一起来看一下具体实现方法吧
    2021-12-12
  • JS 巧妙获取剪贴板数据 Excel数据的粘贴

    JS 巧妙获取剪贴板数据 Excel数据的粘贴

    最近需要在浏览器端实现excel数据的粘贴，一开始去找获取剪贴板数据的方法。但是在浏览器端，JS去取是受安全限制的。
    2009-07-07
  • JavaScript内存管理与闭包实例详解

    JavaScript内存管理与闭包实例详解

    不管什么样的编程语言,在代码的执行过程中都是需要给它分配内存的,下面这篇文章主要给大家介绍了关于JavaScript内存管理与闭包的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06

最新评论