利用前端JS进行数字和字母的多位随机展示_前端登录页面设置输入随机字符

前端展示随机字母和数字主要是利用随机数的概念，将所需要随机的字母设置为从10开始的key:value对，例如将所有的大写字母和0~9的数字进行随机，组成***-**的结构，例如E33-4R

1.首先在create中声明随机长度和相应的输出方式

created() {
    let total = 6;//最终得出的结果是6位，如RY4-MJ
    console.log("生成的长度:", total);
    console.log(this.generateRandomNumbers(total)); //输出随机6位提货码（五位随机数+一位符号）
  },

2.声明键值对：所有的大写字母和符号”-“（key从10开始，到36结束）

numberConvertEnglishLettersMap() {
      return [
        { key: 10, value: "A" },
        { key: 11, value: "B" },
        { key: 12, value: "C" },
        { key: 13, value: "D" },
        { key: 14, value: "E" },
        { key: 15, value: "F" },
        { key: 16, value: "G" },
        { key: 17, value: "H" },
        { key: 18, value: "I" },
        { key: 19, value: "J" },
        { key: 20, value: "K" },
        { key: 21, value: "L" },
        { key: 22, value: "M" },
        { key: 23, value: "N" },
        { key: 24, value: "O" },
        { key: 25, value: "P" },
        { key: 26, value: "Q" },
        { key: 27, value: "R" },
        { key: 28, value: "S" },
        { key: 29, value: "T" },
        { key: 30, value: "U" },
        { key: 31, value: "V" },
        { key: 32, value: "W" },
        { key: 33, value: "X" },
        { key: 34, value: "Y" },
        { key: 35, value: "Z" },
        { key: 36, value: "-" },
      ];
    },

3.设置随机函数，传入total来设置长度，随机从0~36，从10开始到36都是对应非数字字符。

generateRandomNumbers(total) {
      let that = this;
      let str = "";
      let number = 36;//标识”-“
      for (let i = 0; i < total; i++) {
        if (i == 3) {
          number = 36;//当i=3的时候，让当前数字为36，字符为”-“
        } else {
          number = parseInt(Math.random() * 35);//将数字在0到35进行随机
        }
        if (number >= 10) {
       // 当前生成的随机数大于等于10则进行转换。
          str += that.numberConvertEnglishLetters(number); 
        } else {
          str += number.toString();
        }
      }
      return str;
    },

4.将大于等于10的数字转换为键值对中的值

    numberConvertEnglishLetters(number) {
      let map = this.numberConvertEnglishLettersMap();
      for (let i = 0; i < map.length; i++) {
        if (map[i].key == number) {
          return map[i].value;
        }
      }
    },

5.控制台可以由下代码得到结果

console.log("生成的长度:", total);
console.log(this.generateRandomNumbers(total));