前端随机生成4位数的图形码并进行校验

最新推荐文章于 2024-06-28 14:33:15 发布

新手小白，程序

最新推荐文章于 2024-06-28 14:33:15 发布

阅读量380

点赞数 10

分类专栏：前端图形验证码文章标签： html5 javascript css3 vue.js chrome

本文链接：https://blog.csdn.net/m0_66408078/article/details/135620643

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

图形验证码

1 篇文章 0 订阅

订阅专栏

可以自己封装为组件开箱即用！

效果图：

<!DOCTYPE html>
<!-- 
   * @Date: 2024-11-16 11:30:03
 * @LastEditors: chenyang
 * @E-Mai:2315949399@qq.com
 * @Description:前端图形码校验
 -->
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #c {
        width: 100px;
        height: 50px;
        background-color: #000000;
        margin: 100px 50%;
      }
      .test {
        width: 100px;
        height: 30px;
        border: #0099ff solid 1.5px;
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
        margin: auto;
        cursor: pointer;
        color: #0099ff;
        opacity: 0.5;
        display: none;
      }
      .test:hover {
        color: white;
        transition: 0.2s all;
        background-color: #0099ff;
      }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
    <div class="test">test</div>
    <script>
      let can = document.getElementById('c')
      can.addEventListener('click', function () {
        drawcode()
      })

      function drawcode() {
        let canvas = can.getContext('2d')
        canvas.clearRect(0, 0, can.width, can.height)
        let randoms = []
        canvas.font = 'italic 105px Calibri'
        var code = '1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,U,V,W,X,Y,Z,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,'
        //随机值数组
        let splide = code.split(',')

        // //随机获取数组里的值
        for (var i = 0; i < 4; i++) {
          let rnum = Math.floor(Math.random() * splide.length)
          randoms.push(splide[rnum])
          canvas.beginPath()
          canvas.fillStyle = '#0088FF'
          canvas.fillText(randoms[i], 75 * i, can.height / 2)
          canvas.fill()

          canvas.stroke()
          console.log('这里面是你要进行校验的字符，记得写一个正则不区分大小写', randoms)
        }
      }
      drawcode()
    </script>
  </body>
</html>