随机验证码：

<!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. cvpr 2019 workshop&oral session

    1. Verification and Certification of Neural Networks神经网络的验证与认证 2. Automated Analysis of Marine Video ...

  2. css使用2

    一.盒子模型 盒子模型 margin:用来调节盒子与盒子之间的距离(标签与标签之间距离) border:盒子的包装厚度(边框) padding:内部物体与盒子之间距离(文本与边框之间的距离) cont ...

  3. 自定义springmvc参数解析器

    实现spring HandlerMethodArgumentResolver接口 通过使用@JsonArg自定义注解来解析json数据(通过fastjson的jsonPath),支持多个参数(@Req ...

  4. shell基础操作

    一.字符串 字符串是shell编程中最常用的数据类型,字符串可以用单引号,也可以用双引号,也可以不用引号. 单引号 name='xiaoxi' 单引号的限制: 单引号里的任何字符都会原样输出,单引号中 ...

  5. php的数组

    Array 数组 PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型.此类型在很多方面做了优化,因此可以把它当成真正的数组,或列表(向量),散列表(是映射的一种 ...

  6. react注

    创建新项目: npm create-react-app test1 运行项目:npm start

  7. system系统调用返回值判断命令是否执行成功

    system函数对返回值的处理,涉及3个阶段: 阶段1:创建子进程等准备工作.如果失败,返回-1. 阶段2:调用/bin/sh拉起shell脚本,如果拉起失败或者shell未正常执行结束(参见备注1) ...

  8. EDM营销技巧之如何进行用户唤醒

    一般来说,EDM营销中肯定有些用户就长期不关注我们的邮件.这个时候我们应该如何唤醒用户呢?本文给大家分享一下技巧. 首先,我们要注重电子邮件地址的价值.只有好的新的邮件地址库,才能引起用户足够的关注. ...

  9. HTM基础之HTML标签

    HTML(超文本标记语言) html代码实际上就是一套能够被浏览器所识别的规则代码,由一个个标签组成.html代码就是一大长串字符串,而这种字符串的格式正好能够被浏览器所识别,也就有了我们的WEB页面 ...

  10. 设计模式(4): 给组件实现单独的store

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 组件自身的store 我们在开发组件的时候,时常都有这种需求,就是希望 ...