随机验证码：

<!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. spring 接口校验参数(自定义注解)

    1. 注解类 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.l ...

  2. linux系统安装步骤

    在虚拟机安装OEL linux 6.5图解(64位) 一,搭建虚拟机环境 虚拟机环境建议10.0版本及以上 可以从官网上下载OELlinux的安装包,http://www.oracle.com 打开虚 ...

  3. sqli--labs(25)

    过滤了 or and 的get注入 0X01测试阶段 ’报错 ” 不报错 那么就是'闭合 好的我们知道闭合后来#闭合后面 ?id= 语法不正确 发现过滤了 or and 那么我们继续构造 ?id= 0 ...

  4. Bootstrap Table 的X-editable插件怎么用

    在准备使用X-editable来做Bootstrap Table 的行内编辑的时候,根据http://www.cnblogs.com/landea... 的文章,我不能将全部效果重复实现,网上也搜索了 ...

  5. crontab定时调度shell脚本

    本人最近要用crontab做一个定时调度任务,调一个启动脚本去执行jar包,并给main方法传一个日期参数. Linux系统:CentOS7 输入: crontab -e 在里面编写: SHELL=/ ...

  6. JavaScript DOM位置尺寸API

    我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeig ...

  7. Oracle开发：创建一个用户并分配表空间和分配权限

    -- 创建一个用户并分配表空间和分配权限 -- 以sysdba登录 oracle@sha-col-oracle-2:~> sqlplus / as sysdba SQL*Plus: Releas ...

  8. 课上作业补交 p526/syscalls1

    P526代码检查: 1 编译运行p524代码,提交运行结果截图 2 MAXLINE的值是多少?提交Ubuntu中查找这个值的命令和结果截图 3 p525 eval 函数中调用的Fork()函数需要什么 ...

  9. jQuery file upload callback options

    autoUpload By default, files added to the widget are uploaded as soon as the user clicks on the star ...

  10. How to Create a Basic Plugin 如何写一个基础的jQuery插件

    How to Create a Basic Plugin Sometimes you want to make a piece of functionality available throughou ...