返回顶部
首页 > 资讯 > 精选 >JavaScript中如何实现函数封装随机颜色验证码
  • 681
分享到

JavaScript中如何实现函数封装随机颜色验证码

2023-06-22 04:06:26 681人浏览 薄情痞子
摘要

小编给大家分享一下javascript中如何实现函数封装随机颜色验证码,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!数字或者字母或者数字字母混合的n位验证码带随机

小编给大家分享一下javascript中如何实现函数封装随机颜色验证码,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

数字或者字母或者数字字母混合的n位验证码带随机的颜色。

function verify(a = 6,b = "num"){  //定义三个随机验证码验证码库  var num ="0123456789"  var str ="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNIPQRSTUVWXYZ"  var mixin = num +str;    //定义一个空字符串用来存放验证码  var verify=""  if(a == undefined || b == undefined){    //验证输入是否合法  不通过就抛出一个异常    throw new Error("参数异常");  }else{      if(a ==""||b==""){        //判断用户是否没有输入        throw new Error("参数非法.");      }else{        //检测输入的类型来判断是否进入        var typea = typeof(a);        var typeb = typeof(b);        if(typea =="number" && typeb =="string"){            if(b == "num"){                                  //定义一个循环来接收验证码    纯数字验证码                for(var i=0;i<a;i++){                     //定义一个变量来存储颜色的随机值                     var r1 = Math.random()*255;                     var g1 = Math.random()*255;                     var b1 = Math.random()*255;                      //确定随机索引                     var index = Math.floor(Math.random()*(num.length-1))                     //确定随机的验证码                     var char = num[index];                     //给随机的验证码加颜色                     verify += `<span style ='color:rgb(${r1},${g1},${b1})'>${char}</span>`                 }                 //返回到数组本身                return verify;            }else if(b =="str"){                 for(var i=0;i<a;i++){                   //纯字母的验证码                    var r1 = Math.random()*255;                    var g1 = Math.random()*255;                    var b1 = Math.random()*255;                     var index = Math.floor(Math.random()*(str.length-1));                    var char = str[index];                     verify += `<span style ='color:rgb(${r1},${g1},${b1})'>${char}</span>`                 }                 return verify;               }else if(b == "mixin"){                 // 混合型的验证码                for(var i=0;i<a;i++){                    var r1 = Math.random()*255;                    var g1 = Math.random()*255;                    var b1 = Math.random()*255;                     var index = Math.floor(Math.random()*(mixin.length-1));                    var char = mixin[index];                     verify += `<span style ='color:rgb(${r1},${g1},${b1})'>${char}</span>`                }                return verify;            }else{                //验证没通过抛出一个异常                throw new Error("输入类型非法.")            }                }else{            //验证没通过抛出一个异常            throw new Error("输入类型非法.")        }      }  }}

下面我们来调用函数试试看

  //第一个值为用户输入的长度,第二个为类型!  var arr = verify(8,"mixin");     document.write(arr)

JavaScript中如何实现函数封装随机颜色验证码

 上面就是结果啦!

以上是“JavaScript中如何实现函数封装随机颜色验证码”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: JavaScript中如何实现函数封装随机颜色验证码

本文链接: https://lsjlt.com/news/302435.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中如何实现函数封装随机颜色验证码
    小编给大家分享一下JavaScript中如何实现函数封装随机颜色验证码,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!数字或者字母或者数字字母混合的n位验证码带随机...
    99+
    2023-06-22
  • JavaScript函数封装随机颜色验证码(完整代码)
    数字或者字母或者数字字母混合的n位验证码带随机的颜色。下面是完整的代码,需要的自取哈! ​ function verify(a = 6,b = "num"){ //定义三个随...
    99+
    2024-04-02
  • javascript如何实现四位随机验证码
    这篇文章主要为大家展示了“javascript如何实现四位随机验证码”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript如何实现四位随机验证码”这...
    99+
    2024-04-02
  • Javascript实现仿QQ随机数验证
    本文实例为大家分享了Javascript实现仿QQ随机数验证的具体代码,供大家参考,具体内容如下 效果图  下面是贴出完整代码 <!DOCTYPE html>...
    99+
    2024-04-02
  • JavaScript实现随机生成验证码及校验
    本文实例为大家分享了JavaScript实现随机生成验证码及校验的具体代码,供大家参考,具体内容如下 输入验证码(区分大小写)点击确认,进行校验。出错就弹框提示 点击 看不清 重新随...
    99+
    2024-04-02
  • php如何实现随机颜色生成器
    这篇文章将为大家详细讲解有关php如何实现随机颜色生成器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。随机颜色生成器function randomColor()...
    99+
    2024-04-02
  • javaWeb如何实现随机图片验证码详解
    实现步骤 1:Java后台生成一张随机数字/字母/汉字验证码的图片。 2:存入redis或者session。 3:用户输入验证码跟redis取出数据做比对。 图片生成工具类 ...
    99+
    2024-04-02
  • JSP如何实现彩色验证码
    这篇文章给大家分享的是有关JSP如何实现彩色验证码的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。生成有4个随机数字和杂乱背景的图片,数字和背景颜色会改变,服务器端刷新(用history.go(-1)也会变) 产生...
    99+
    2023-06-03
  • JavaScript如何实现函数参数验证器
    这篇文章将为大家详细讲解有关JavaScript如何实现函数参数验证器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。函数参数验证器JavaScript 允许你对函数参数设...
    99+
    2024-04-02
  • JavaScript+html实现前端页面随机二维码验证
    分享炫酷的前端页面随机二维码验证,供大家参考,具体内容如下 直接上代码 <%@ page contentType="text/html;charset=UTF-8" lan...
    99+
    2024-04-02
  • Android自定义View实现随机数验证码
    目录前言效果自定义 View 分类步骤1.自定义属性2.添加构造方法3.在构造里获取自定义样式4.重写 onDraw 计算坐标绘制5.重写 onMeasure 测量宽高6.设置点击事...
    99+
    2024-04-02
  • javascript手机验证、邮箱验证、密码验证的正则表达式简单封装实例
    javascript【手机验证】、【邮箱验证】、【密码验证】的正则表达式的封装: 【手机验证】: 以下代码是验证手机号码的正则表达式的方法, 【checkPhone】:表示的是方法的...
    99+
    2024-04-02
  • JavaScript如何实现随机码的生成与校验
    这篇文章给大家分享的是有关JavaScript如何实现随机码的生成与校验的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript有什么特点1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,j...
    99+
    2023-06-14
  • vue组件如何封装实现抽奖随机数
    今天小编给大家分享一下vue组件如何封装实现抽奖随机数的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、子组件<tem...
    99+
    2023-06-29
  • Android怎么自定义View实现随机数验证码
    本篇内容介绍了“Android怎么自定义View实现随机数验证码”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果自定义 View 分类简单...
    99+
    2023-07-02
  • 小程序如何实现简单的生成随机验证码
    本文小编为大家详细介绍“小程序如何实现简单的生成随机验证码”,内容详细,步骤清晰,细节处理妥当,希望这篇“小程序如何实现简单的生成随机验证码”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 //随机生成验...
    99+
    2023-06-26
  • JavaScript如何实现验证码倒计时
    小编给大家分享一下JavaScript如何实现验证码倒计时,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2024-04-02
  • java手机验证码如何实现
    要实现Java手机验证码功能,你可以使用短信平台的API来发送短信验证码。以下是一个简单的示例:1. 首先,你需要在短信平台上注册一...
    99+
    2023-09-04
    java
  • react如何实现手机验证码
    今天小编给大家分享一下react如何实现手机验证码的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。react实现手机验证码的方...
    99+
    2023-07-04
  • Javascript中如何实现表单验证
    本篇文章为大家展示了Javascript中如何实现表单验证,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1. 检查一段字符串是否全由数字组成: ﹤ scr...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作