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. JavaScript基础2——关于变量

    变量的声明                            变量的定义:使用var关键字来声明,区分大小写的.注意:不用var,会污染全局变量.        变量的命名规范是:字母,数字,$符 ...

  2. canvas 从初级到XX 2# 让我们在之前的基础之上，再迈进一步吧 [中级向] （上）

    还是老样子,先啰嗦一点前言. 最近各种事务缠身,所以也就隔了比较长的时间才开始码这篇文.希望不会这么快就过气. 好了,接下来就开始码代码.(写到中途,突然感觉到的.本篇设计大量初中物理知识,请怀念的往 ...

  3. InnoDB 逻辑存储结构

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/80 如果创建表时没有显示的定义主键,mysql会按如下方式创建主 ...

  4. openstack ocata版本简化安装

    Network Time Protocol (NTP) Controller Node apt install chrony Edit the /etc/chrony/chrony.conf 添加如下 ...

  5. 扩展Microsoft Graph数据结构（开放扩展）

    作者:陈希章 发表于 2018年1月2日 前言 Microsoft Graph是一张拥有巨大价值的网络,它定义了包括Office 365在内的资源的实体及其关系,它的价值体现在,随着用户积累的数据越来 ...

  6. SpringBoot_02_servlet容器配置

    二.参考资料 1.Spring boot 自定义端口 2.Spring Boot的Web配置(九):Tomcat配置和Tomcat替换

  7. Struts2-整理笔记（四）Action生命周期、如何获取参数（3种）、集合类型参数封装

    一.Action生命周期 每次请求到来时,都会创建一个新的Action实例 Action是线程安全的,可以使用成员变量接收参数 二.获取参数的方式(3种) 1.属性驱动获得参数 每次请求Action时 ...

  8. hiberation4 获取session

    T t; Configuration cfg = new Configuration(); cfg.configure(); ServiceRegistry serviceRegistry = new ...

  9. linux 操作中命令备忘

    1 使用grep 查询关键内容 如果你想在当前目录下 查找"hello,world!"字符串,可以这样: grep -rn "hello,world!" * * ...

  10. PCA主成份分析

    1   背景介绍 真实的训练数据总是存在各种各样的问题: 1. 比如拿到一个汽车的样本,里面既有以“千米/每小时”度量的最大速度特征,也有“英里/小时”的最大速度特征,显然这两个特征有一个多余. 2. ...