今天迎来了2018年第一场雪,这个美好的日子,总的写点什么纪念一下,在这里写了一个在js中使用Math.random()函数,随机生成四位数的验证码及其验证码换颜色.
 js代码如下:
   var arrayTest= ["m","n","v","x","z","a","b","c","d","e","f","g","h","j","k","l","q","w","r","t","y","u","i","i","o","p",1,2,3,4,5,6,7,8,9,0]
//获取span标签
    var span = document.getElementsByTagName('span');
    //定义一个函数,randomTest()
    function randomTest(){
      //表示循环几次,循环出多少个数值.
   for(var i=0;i<4;i++){
//parseInt()函数将Math.random()函数中随机出的值乘以数组的长度,它的值的范围就是0——Array.length-1,此时取出的值为数组的下标.
var num = parseInt(Math.random()*arrayTest.length);
             //将arrayTest中的值取出,利用上面取出的下标num,此时取出的值为数组中真正的值,而不是它的下标.
var code = arrayTest[num];
             //将上面取到的<span>元素通过innerHTML赋值code
span[i].innerHTML=code;
             //将随机出的值通过style.color赋予颜色,这里使用了自己写的一个封装函数randomColor(),
span[i].style.color=randomColor();
     }
      }
  html代码如下:   
     <p>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
      //记得引入写好的js文件 
      <script src="js/H.js"></script>
      //这里通过onclick调用刚刚js中写好的randomTest()函数,记得引入写好的js文件
       <button onclick="randomTest()">刷新</button>
   
  //封装在js中的随机颜色函数,利用返回rgb的值来给随机数上色.
  function randomColor(){
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
var rgb = "rgb("+r+","+g+","+b+")";
return rgb;
}
 如果有更好的方法随时留言通知我哦~                                                        2018年1月4日

  

 

     

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

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

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

  2. 【JavaScript随机生成验证码及其颜色】

    css样式: <style type="text/css"> /*给验证码设一个盒子*/ #yzm{ width: 120px; height: 50px; text- ...

  3. 随机生成验证码(JS)

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

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

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

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

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

  6. JS随机生成不重复数据的代码分享

    JS随机生成不重复数据. 代码如下: <script> // 定义存放生成随机数的数组 var array=new Array(); // 循环N次生成随机数 for(var i = 0 ...

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

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

  8. js随机生成一个数组中的随机字符串以及更新验证码

    随机生成m,n范围的值得公式: Math.random()*(n-m)+m: 改正公式:Math.random()*(n+1-m)+m // 生成随机字符串function randomMixed(n ...

  9. captcha.js一个生成验证码的插件,使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

随机推荐

  1. 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器

    北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 论述当下网络时间同步 ...

  2. PyQt4 模拟记事本基本功能(保存,打开文件)

    完成功能: 1. 默认[保存]按钮enable 2. 修改文本的内容后,[enable] 3. 解决字符乱码问题:utf-8 4. 提示:如果修改了文件没有保存的时候,又尝试打开新的文件,给出相关的提 ...

  3. VI命令汇总

    ia/Ao/Or + ?替换 0:文件当前行的开头$:文件当前行的末尾G:文件的最后一行开头:n :文件中第n行的开头 dd:删除一行3dd:删除3行yy:复制一行3yy:复制3行p:粘贴u:undo ...

  4. 微信小程序节点查询方法:wx.createSelectorQuery()的使用场景与注意事项

    小程序由于内置于微信,这使得它有了得天独厚的宣传和使用优势,本着学习的心态,我在官网上看了一遍开发文档,大致得出小程序框架的设计模式与使用注意事项(重点来了,其实开发文档某些方面叙述的并不仔细,甚至存 ...

  5. 运用OpenMP提速图像处理速度

    一.算法测试 // openmptest的测试程序#include "stdafx.h"void Test(int n){    for (int i=0;i<10000;i ...

  6. 如何在vue-cli webpack中全局引入jquery

    1.首先执行:npm install  jQuery --save-dev,在package.json里加入jQuery. 2.修改build下的webpack.base.conf.js 方法一: 首 ...

  7. 前端请求参数MD5加密校验,参数串解密

    首先引入MD5加密库:=>https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js; 步骤:=>1.请求前对参数进行字典升序排序,排 ...

  8. Django模板中的数字自增

    Django框架的模板提供了{% for %} 标签来进行循环 例如对集合进行循环是比较简单的 {% for row in v1 %} <div>{{row.name}}</div& ...

  9. cain使用方法

    首先安装cain,这里就不废话了 1, 选择中核弹标志左边的按一下,然后在sniffer右键点击第一个扫描内网所有ip 扫描完后选择网关的IP下面选择arp标志,在按一下上方空格处,+号变得可以使用了 ...

  10. 在实战中使用Sass和Compass

    第三章 无需计算玩转CSS网格布局 3.1 网格布局介绍 3.2 使用网格布局 3.2.1 术语 1 术语名 定义 是否涉及HTML标签 2 列 内容度量的垂直单位 否 3 容器 构成一个网格布局的H ...