css样式：

<style type="text/css">

            /*给验证码设一个盒子*/

            #yzm{

                width: 120px;

                height: 50px;

                text-align: center;

                background: #ccc;

                float: left;

            }

            span{

                font-size: 20px;

                line-height: 50px;

            }

            /*按钮*/

            button{

                width: 100px;

                height: 50px;

            }

</style>
html代码：

<body onload='yanzhengma()'>

    <!--在页面加载时就执行这个函数-->

    <div id="yzm">

         <span></span>

         <span></span>

         <span></span>

         <span></span>

    </div>

    <!--点击事件-->

    <button onclick="yanzhengma()">刷新</button>

</body>
js代码：

<script type="text/javascript">

             //先写出一些需要随机的数字及字母

            var shu = ('1234567890qwertyuioplkjhgfdsazxcvbnmQAZWSXEDCRFVTGBYHNUJMIKOLP');

            //获取span

            var span = document.getElementsByTagName("span");

            //定义一个函数为yanzhengma()

            function yanzhengma(){

                var yzm=" ";

                //想要几个循环几个数值

                for(i=0;i<4;i++){

                    //随机Math.random()出的值乘以数组的长度，取出的值为数组的下标

                    var num = parseInt(Math.random() * shu.length);

                    //取出shu中的值,利用上面取出的下标num,此时取出的是数组中的值

                    yzm = shu[num];

                    //把随机取到的值通过innerHTML在页面上

                    span[i].innerHTML=yzm;

                    //把随机出的值通过style.color赋予颜色 ，Color()是自己封装的一个随机颜色函数

                    span[i].style.color=color();

                }

            }

    </script>
颜色封装的代码：

/*封装Color*/

    function color(){

        var color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";

        return color;

    }

注意：封装在写完的时候千万千万记住要把它引入HTML中！！

效果：

【JavaScript随机生成验证码及其颜色】的更多相关文章

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

    今天迎来了2018年第一场雪,这个美好的日子,总的写点什么纪念一下,在这里写了一个在js中使用Math.random()函数,随机生成四位数的验证码及其验证码换颜色. js代码如下: var arra ...

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

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

  3. JavaScript随机生成颜色以及十六进制颜色 与RGB颜色值的相互转换

    /** * 随机生成颜色 * @return 随机生成的十六进制颜色 */ function randomColor(){ var colorStr=Math.floor(Math.random()* ...

  4. 随机生成验证码（JS）

    效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所 ...

  5. Python随机生成验证码的两种方法

    Python随机生成验证码的方法有很多,今天给大家列举两种,大家也可以在这个基础上进行改造,设计出适合自己的验证码方法方法一:利用range Python随机生成验证码的方法有很多,今天给大家列举两种 ...

  6. Android锁定EditText内容和随机生成验证码

    昨天写了个小Demo,实现了随机生成验证码,和锁定EditText两个小功能,先看一下效果图: 锁定EditText在我们不须要用户编辑EditText内容的时候能够用到,实现还是非常easy的,一行 ...

  7. 随机生成验证码及python中的事务

    1.随机生成验证码 # import random # print(random.random()) #-1的小数 # print(random.randint(,)) #包括1和3 # print( ...

  8. 使用JavaScript随机生成数字混合字母的验证码

      <script> // 封装一个随机生成数字的函数 function random(a, b) { var n = Math.round(Math.random() * (a - b) ...

  9. php随机生成验证码代码

    <?php session_start(); //产生一个随机的字符串验证码 $checkcode=""; for ($i=0;$i<4;$i++){ $checkco ...

随机推荐

  1. jmeter监控服务资源

    转:http://www.cnblogs.com/chengtch/p/6079262.html  1.下载需要的jmeter插件 如图上面两个是jmeter插件,可以再下面的链接中下载: https ...

  2. 嵌套查询别名必须性示例。HAVING用法

    HAVING的一个重要作用: SELECT子句有统计函数嵌套时SELECT子句不能出现GROUP BY列,如果需要显示此列可以把嵌套的统计函数写成子查询放在HAVING子句中. 可用HAVING简化语 ...

  3. Linux 学习记录 二 (文件的打包压缩).

     前言:本文参考<鸟哥的Linux 私房菜>,如有说的不对的地方,还请指正!谢谢!  环境:Centos 6.4    和window不同,在Linux压缩文件需要注意的是,压缩后的文件会 ...

  4. 串口调试者v2.1------开源c#串口调试工具

    第一步:上图 第二步:上代码 >>>>>>>>>>>源代码下载<<<<<<<<< ...

  5. Thomas Hobbes: Leviathan

    Man is distinguished, not only by his reason, but by this singular passion from other animals, which ...

  6. 关于 dos 下 npm 命令的使用

    npm install 可以安装模块,后面跟 -g 安装全局的,后面跟包的名字就是安装指定的包 npm uninstall <安装包的名字> 卸载某个包,后面跟 -g 是卸载全局的某个包 ...

  7. mysql 数据表字段修改sql 语句

    1 新增字段 alter table bulletin add citycode varchar(6) not null default 0 [after `id`]; # 城市代码 2 修改字段 a ...

  8. SegmentFault错误汇总

    在三个月的工作中,经常碰到SegmentFault的错误,有时候是因为计算集群问题导致,更多的时候是程序本身的问题,我计划将之后碰到的SegmentFault整合起来,一来方便日后查看,二来如果能帮助 ...

  9. 从JVM字节码执行看重载和重写

    Java 重写(Override)与重载(Overload) 重写(Override) 重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变.即外壳不变,核心重写! 重写的 ...

  10. Flask 框架 简介

    一.Flask介绍 Flask是一个基于Werkzeug,Jinja 2 轻量级的web开发框架, 使用Python开发, 上手简单. 二.安装Flask 三.第一个Flask程序 1.编写app.p ...