随机验证码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            *{margin:0;padding:0;}

            #auth_code{width:200px;

                       height:100px;

                       border:1px solid #ccc;

                       margin:200px auto 0;

                       text-align:center;

                       line-height:100px;

                       font-size:50px;

                       letter-spacing:5px;

                       cursor:pointer;}

        </style>

    </head>

    <body>

        <div id="auth_code" onclick="auth_code()"></div>

        <script>

            //验证码内需要字符个数

            var num=4;

            //点击更换验证码

            function auth_code(){

                //获取id为box元素

                var box=$("auth_code");

                //随机改变字符

                box.innerHTML=randstr();

                //获取box里span元素，并换颜色

                for(var i=0;i<num;i++){

                    var span=box.getElementsByTagName("span")[i];

                    span.style.color=randcolor16();

                }

            }

            //获取元素通过ID-----------函数-----------

            function $(IdName){

                return document.getElementById(IdName);

            }

            //字符随机选取---------------函数------------

            function randstr(){

                var all = ['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', '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'];

                var words="";

                for(var i=0;i<num;i++){

                    var word=all[parseInt(Math.random()*all.length)];

                    words+="<span>"+word+"</span>";

                }

                return words;

            }

            //随机颜色rgb------------函数----------------

            function randcolor(){

                var color= parseInt(Math.random()*255);

                var color1= parseInt(Math.random()*255);

                var color2= parseInt(Math.random()*255);

                return "rgb("+color+","+color1+","+color2+")"

            }

            //随机颜色十六进制-----------函数------------------

            function randcolor16(){

                var color="#";

                var color16num = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']

                for(var i=1; i<=6;i++){

                    color+=color16num[parseInt(Math.random()*color16num.length)]

                }

                return color;

            }

            window.onload = auth_code();

        </script>

    </body>

</html>

js随机验证码的更多相关文章

  1. js随机生成验证码以及随机颜色

    Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...

  2. js用正则表达式验证用户和密码的安全性，生成随机验证码

    制作了一个表单,表单验证用户.密码.随机验证码 html页面

  3. js编写验证码

    这是一个简单的js编写的验证码,自己已经亲自验证,没有问题了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  4. canvas实现随机验证码

    canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...

  5. js简单验证码的生成和验证

    如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div> <table border="0" cellspacing="5&qu ...

  6. php实现动态随机验证码机制（CAPTCHA）

    php实现动态随机验证码机制 验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computers and Humans Ap ...

  7. django-生成随机验证码

    Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 1   1 pip3 install pillow 基本使用 1.创建图片 from PIL impo ...

  8. vue实现随机验证码功能

    效果图: 1.html代码 <div class="form-group" style="display: flex;"> <div> ...

  9. python笔记-20 django进阶 （model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）

    一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...

随机推荐

  1. JMS学习十一(ActiveMQ Consumer高级特性之独有消费者（Exclusive Consumer）)

    一.简介 Queue中的消息是按照顺序被分发到consumers的.然而,当你有多个consumers同时从相同的queue中提取消息时, 你将失去这个保证.因为这些消息是被多个线程并发的处理.有的时 ...

  2. mybatis批量插入并返回主键（序列）-oracle

    需求:批量插入数据,并返回每条数据的主键(序列),因为这里是采用序列生成唯一的主键的, 其实oracle批量 插入操作有几种,网上百度都是有相关资源的.但是笔者现在的需求是,不仅批量插入数据后,并返回 ...

  3. bootstrap的editTable实现方法

    首先下载基于bootstrap的源码到本地.引用相关文件. <link href="/Content/bootstrap/css/bootstrap.min.css" rel ...

  4. sklearn—支持向量机

    SVC介绍: 拟合出来的模型为一个超平面 解决与样本维数无关,适合做文本分类 解决小样本.非线性.高维 是用于分类.回归.孤立点检测的监督学习方法的集合. 优点: 有效的高维空间 维数大于样本数的时候 ...

  5. 电脑出现了一块tap window adapter v9 网卡 以及虚拟机桥接模式无法通信原因

    计算机与外界局域网的连接是通过主机箱内插入一块网络接口板(或者是在笔记本电脑中插入一块PCMCIA卡).网络接口板又称为通信适配器或网络适配器(network adapter)或网络接口卡NIC(Ne ...

  6. CAN诊断学习

    汽车CAN总线有动力总成PCAN,底盘控制CCAN,整车控制BCAN,娱乐ECAN,诊断DCAN五种. CAN诊断,即是对CAN网络中各节点,各CAN总线,网关的故障进行检查与修复. 统一诊断服务(U ...

  7. JS实现数组排序：升序和降序

    如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序.即 a 和 b 是两个将要被比较的元素: 如果 compareFunction(a, b) 小于 0 ,那么 a 会 ...

  8. C#接口的实现和继承实践

    1.基本概念 接口是一种契约规范,类似于抽象基类.包括方法,属性,索引器和事件作为成员,这些成员只是作为定义,并不在接口中具体实现. 接口创建时注意以下事项: 继承接口的任何非抽象类都必须实现接口的所 ...

  9. 【HANA系列】SAP HANA SQL获取本周的周一

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL获取本周 ...

  10. jeecg项目将workbook 的Excel流添加到zip压缩包里导出

    1.直接献出代码 Map<String,List<ConfidentialInformation>> typeMap = new HashMap<>(); try ...