4 位随机验证码 (JS)

效果图

实现随机的验证码肯定离不开我们的随机函数，至于实现的方法和达到的样式是怎么样的，这里我就就不一一而论了，本篇介绍了两种方法供大家参阅，欢迎提出宝贵意见

第一种方法

涨芝士✈

• 随机数函数Manth
• 数组的方法和循环
• 点击事件

代码部分

//
const yzmbox = document.querySelector(".yzm")
function getyzm() {
    let newarr = "";
    let arr = [0, 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', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    for (var i = 0; i < 4; i++) {
      //获取随机的下标。
      var index = getrandom(0, 35);
      newarr += arr[index];
    }
    return newarr;
  }
  // 生成随机数的函数
  function getrandom(n, m) {
    return Math.floor(Math.random() * (m + 1 - n) + n);
  }
  // 点击一次切换一个随机的4位验证码
  yzmbox.onclick = function () {
    let yzm = getyzm();
    console.log(yzm);
    yzmbox.innerHTML = yzm;
    return yzm;//由于我们可能还需要用到这个验证码，所以这里把他返回出去
  }

第二种方法

涨芝士✈

• 随机数函数Manth
• canvas的一些属性和方法与substr()方法
• 函数的封装

代码部分

 window.addEventListener("DOMContentLoaded", function () {
      const yzm = document.querySelector(".yzm")
      const cxt = yzm.getContext("2d");
      function showYzm() {
        cxt.clearRect(0, 0, 150, 50); //清空画布区域
        let str = "012345678910ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        let position = 0;
        let x, y;
        let fontSize = 30;
        cxt.beginPath();
        cxt.fillStyle = "#ccc";
        for (let i = 0; i < 4; i++) {
          x = 20 + (i * 30);//生成四个X坐标
          y = 25 + Math.floor(Math.random() * 20);//生成四个y坐标
          fontSize = 10 + Math.floor(Math.random() * 20);//字号
          cxt.font = "bold " + fontSize + "px Arial";//字体属性
          position = Math.floor(Math.random() * 35);//在36个字母和数字中随机生成一个索引值
          cxt.fillText(str.substr(position, 1), x, y, 300);//通过substr截取4个str中的元素（position为随机变量所以截取数字随机）
        }
      }
      showYzm();
      yzm.addEventListener("click", function () {
        showYzm();
      });
    });

总结

方法一和方法二的区别在于：方法二实现了随机四位验证码的位置和字号都不固定，所以会更完善些，另外也比较好理解一些；此外方法二对函数进行了封装，可以做到当页面加载完成就可以实现一个随机的的验证码的效果。各位大佬感觉方法一还能有改进的地方，欢迎留言。