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. git入门（msysgit安装）

    1.下载git-for-windows 常用的GitHub客户端msysgit,也就是git-for-windows. 登录官网 https://git-for-windows.github.io/, ...

  2. C C语言中关键词，以及知识点复习

    C语言学习 C语言练习知识点 auto        局部变量(自动储存) break       无条件退出程序最内层循环 case        switch语句中选择项 char         ...

  3. iOS pch文件创建使用，和info.plis文件路径改变，路径的设置

    一 路径报错: 二 pch创建设置: 一:如果要更改Info.plist与Prefix.pch文件实际路径,也就是实际文件的位置(不是在工程中的组织路径),需要到Build Settings中修改对应 ...

  4. [array] leetcode - 31. Next Permutation - Medium

    leetcode - 31. Next Permutation - Medium descrition Implement next permutation, which rearranges num ...

  5. 【Zookeeper】源码分析之Leader选举（一）

    一.前言 分析完了Zookeeper中的网络机制后,接着来分析Zookeeper中一个更为核心的模块,Leader选举. 二.总结框架图 对于Leader选举,其总体框架图如下图所示 说明: 选举的父 ...

  6. Java I/O---概述

    对于程序设计者来说,创建一个好的输入/输出系统(I/O)系统是一项艰难的任务. 现在大量不同方案已经说明了这一点.挑战似乎来自于要涵盖所有的可能性.不仅存在各种I/O源端和想要与之通信的接收端(文件. ...

  7. headfirst设计模式（4）—工厂模式

    开篇 天天逛博客园,就是狠不下心来写篇博客,忙是一方面,但是说忙能有多忙呢,都有时间逛博客园,写篇博客的时间都没有?(这还真不好说) 每次想到写一篇新的设计模式,我总会问自己: 1,自己理解了吗? 2 ...

  8. jquery $.fn $.fx是什么意思有什么用

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效, .fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn ...

  9. JavaScript的DOM编程--08--复习

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. C# .net中json字符串和对象之间的转化方法

    http://blog.csdn.net/xuexiaodong009/article/details/46998069 json作为作为一种最常用的数据,应用很广泛,在.net中如何把一个对象转化为 ...