js随机数验证

时间:2022-06-03 mondayes 人气:0
效果图
下面是贴出完整代码
<!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>
加载全部内容