博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js随机生成验证码及其颜色
阅读量:6610 次
发布时间:2019-06-24

本文共 1586 字,大约阅读时间需要 5 分钟。

    今天迎来了2018年第一场雪,这个美好的日子,总的写点什么纪念一下,在这里写了一个在js中使用Math.random()函数,随机生成四位数的验证码及其验证码换颜色.
1 js代码如下: 2       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] 3         //获取span标签 4      var span = document.getElementsByTagName('span'); 5       //定义一个函数,randomTest() 6     function randomTest(){ 7          //表示循环几次,循环出多少个数值. 8               for(var i=0;i<4;i++){ 9                       //parseInt()函数将Math.random()函数中随机出的值乘以数组的长度,它的值的范围就是0——Array.length-1,此时取出的值为数组的下标.10                       var num = parseInt(Math.random()*arrayTest.length);13              //将arrayTest中的值取出,利用上面取出的下标num,此时取出的值为数组中真正的值,而不是它的下标.14                       var code = arrayTest[num];15              //将上面取到的元素通过innerHTML赋值code16                       span[i].innerHTML=code;17              //将随机出的值通过style.color赋予颜色,这里使用了自己写的一个封装函数randomColor(),18                       span[i].style.color=randomColor();19             }20       }

 

  html代码如下:        

      //记得引入写好的js文件 
      

 

      //这里通过onclick调用刚刚js中写好的randomTest()函数,记得引入写好的js文件
       

 

 

      //封装在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日

  

 

     

转载于:https://www.cnblogs.com/houxiaowei/p/8196236.html

你可能感兴趣的文章
转:PHP程序里的敏感信息处理方法
查看>>
只有火狐识别的css
查看>>
团队冲刺第八天
查看>>
hive类型转化错误,会错误提示指定分区参数
查看>>
开源许可证
查看>>
网络之路--【第三章】——分层模型介绍及以太帧结构
查看>>
wxPython treeCtrl树节点递归遍历(复制)
查看>>
[高数][高昆轮][高等数学上][第一章-函数与极限]08.函数的连续性与间断点
查看>>
xss攻击进阶
查看>>
过虑窗体最小化消息
查看>>
(转) Windows下MySQL免安装版的下载与配置
查看>>
扩展OpenLayers右键菜单
查看>>
iphone-common-codes-ccteam源代码 CCPlayer.h
查看>>
HTML头部
查看>>
如何去掉dede列表推荐时标题被加粗
查看>>
bzoj 1304: [CQOI2009]叶子的染色
查看>>
小程序引入多个e-charts
查看>>
Node.js实现热加载
查看>>
PLSQL_Oracle基本概念总结(汇总)
查看>>
分布式icinga2安装与使用
查看>>