耀极客论坛

 找回密码
 立即注册
查看: 433|回复: 0

JavaScript函数封装随机颜色验证码(完整代码)

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-9 01:23:06 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了JavaScript函数封装随机颜色验证码(完整代码),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  数字或者字母或者数字字母混合的n位验证码带随机的颜色。下面是完整的代码,需要的自取哈!
  1. function verify(a = 6,b = "num"){
  2.   //定义三个随机验证码验证码库
  3.   var num ="0123456789"
  4.   var str ="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNIPQRSTUVWXYZ"
  5.   var mixin = num +str;
  6.   
  7.   //定义一个空字符串用来存放验证码
  8.   var verify=""
  9.   if(a == undefined || b == undefined){
  10.     //验证输入是否合法  不通过就抛出一个异常
  11.     throw new Error("参数异常");
  12.   }else{
  13.       if(a ==""||b==""){
  14.         //判断用户是否没有输入
  15.         throw new Error("参数非法.");
  16.       }else{
  17.         //检测输入的类型来判断是否进入
  18.         var typea = typeof(a);
  19.         var typeb = typeof(b);
  20.         if(typea =="number" && typeb =="string"){
  21.             if(b == "num"){
  22.                   
  23.                 //定义一个循环来接收验证码    纯数字验证码
  24.                 for(var i=0;i‹a;i++){
  25.                      //定义一个变量来存储颜色的随机值
  26.                      var r1 = Math.random()*255;
  27.                      var g1 = Math.random()*255;
  28.                      var b1 = Math.random()*255;
  29.                      //确定随机索引
  30.                      var index = Math.floor(Math.random()*(num.length-1))
  31.                      //确定随机的验证码
  32.                      var char = num[index];
  33.                      //给随机的验证码加颜色
  34.                      verify += `‹span style ='color:rgb(${r1},${g1},${b1})'>${char}‹/span>`
  35.                  }
  36.                  //返回到数组本身
  37.                 return verify;
  38.             }else if(b =="str"){
  39.                  for(var i=0;i‹a;i++){
  40.                    //纯字母的验证码
  41.                     var r1 = Math.random()*255;
  42.                     var g1 = Math.random()*255;
  43.                     var b1 = Math.random()*255;
  44.                     var index = Math.floor(Math.random()*(str.length-1));
  45.                     var char = str[index];
  46.                     verify += `‹span style ='color:rgb(${r1},${g1},${b1})'>${char}‹/span>`
  47.                  }
  48.                  return verify;   
  49.             }else if(b == "mixin"){
  50.                  // 混合型的验证码
  51.                 for(var i=0;i‹a;i++){
  52.                     var r1 = Math.random()*255;
  53.                     var g1 = Math.random()*255;
  54.                     var b1 = Math.random()*255;
  55.                     var index = Math.floor(Math.random()*(mixin.length-1));
  56.                     var char = mixin[index];
  57.                     verify += `‹span style ='color:rgb(${r1},${g1},${b1})'>${char}‹/span>`
  58.                 }
  59.                 return verify;
  60.             }else{
  61.                 //验证没通过抛出一个异常
  62.                 throw new Error("输入类型非法.")
  63.             }
  64.         
  65.         }else{
  66.             //验证没通过抛出一个异常
  67.             throw new Error("输入类型非法.")
  68.         }
  69.       }
  70.   }
  71. }
复制代码
  下面我们来调用函数试试看
  1.   //第一个值为用户输入的长度,第二个为类型!
  2. var arr = verify(8,"mixin");
  3.      document.write(arr)
复制代码

  上面就是结果啦!
  这个记录下来为了方便以后使用的方便,也希望大佬们多多交流,多多留言,指出我的不足的之处啦!
  有需要的小伙伴可以研究研究啦!!
  到此这篇关于JavaScript函数封装随机颜色验证码的文章就介绍到这了,更多相关js函数封装颜色验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 18:43 , Processed in 0.065367 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表