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. 中国IT职业培训市场经历的几波浪潮，未来的浪潮又是那一波？

    第一波 电脑普及性培训时代 2000年至2003年左右,中国正处于PC计算机普及阶段,而IT职业教育也刚开始兴起,这一波浪潮主要以计算机办公自动化.平面设计.计算机硬件维修.为主:几家大的IT培训机构 ...

  2. iOS masonry九宫格 单行 多行布局

    Masonry是个好东西,在当前尺寸各异的iOS开发适配中发挥着至关重要的作用,由于项目中Masonry布局用的比较多,对于UI布局也有了一些自己的理解,经常会有人问道Masonry布局九宫格要怎么布 ...

  3. C#Lambda表达式Aggregate的用法及内部运行方式的猜想

    , , , , }; // 其和为15 var count = nums.Aggregate((body, next) => { // 注意,nums的元素个数至少一个以上(但如果是有seed的 ...

  4. npm的使用总结

    npm常用命令 npm list 查看当前目录下已安装的包 npm root -g 查看全局安装的包的路径 npm help 查看全部命令 npm update/uninstall moduleNam ...

  5. bzoj 3143: [Hnoi2013]游走

    Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点, ...

  6. 【读书笔记】《Effective Java》——目录

    第二章——创建和销毁对象 第1条:考虑用静态工厂方法替代构造器 第2条:遇到多个构造器参数时要考虑用构建器 第3条:用私有构造器或者枚举类型强化Singleton属性 第4条:通过私有构造器强化不可实 ...

  7. 英雄联盟LOL用什么语言写的？

    是用openGL开发的 开发语言是c/c++ 客户端是一个.net的web界面

  8. Netty-Websocket 根据URL路由，分发机制的实现

    最近在做netty整合websocket,发现网上很多项目都是最简单的demo,单例的一个项目. 然而公司的项目需要接受几个不同功能的ws协议消息,因此最好是用URL来区分,让页面上采用不同的链接方式 ...

  9. Java 浮点型与双精度数值比较

    对于双精度与浮点数之间的比较存在潜在的转化

  10. Oracle 用户操作表权限

    grant select any table to xxx 将使得xxx用户能够查看到所有用户的表:正确的授权不能是这样: 用户是隔离表的schema,授权时..