生成4位不重复验证码

最新推荐文章于 2021-11-01 16:32:44 发布

程序媛草莓酱

最新推荐文章于 2021-11-01 16:32:44 发布

阅读量1.3k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43248448/article/details/105894420

版权

需求

获取四位不重复的验证码——脑补某网站登录页面

思路

加载页面时，生成4位验证码放置到矩形框中，点击后重新生成新的4位验证码，在拼接之前判断该字符是否已经存在。

实现

页面搭建与基本样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .codeBox{
      width: 100px;
      height: 40px;
      line-height: 40px;
      margin: 20px;
      border: 1px solid lightcoral;
      text-align: center;
      cursor: pointer;
      font-size: 20px;
      letter-spacing: 5px;
    }
  </style>
</head>
<body>
  <div class="codeBox" id="codeBox">AFDE</div>
</body>
</html>