zoukankan      html  css  js  c++  java
  • js随机生成验证码及其颜色

        今天迎来了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              //将上面取到的<span>元素通过innerHTML赋值code
    16                       span[i].innerHTML=code;
    17              //将随机出的值通过style.color赋予颜色,这里使用了自己写的一个封装函数randomColor(),
    18                       span[i].style.color=randomColor();
    19             }
    20       }                
      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日

      

     

         

  • 相关阅读:
    题解 P1587 【[NOI2016]循环之美】
    PKUSC2019颓废记
    使用ImageIO.write上传二维码文件时候,提示系统找不到指定路径
    rt.jar包添加源文件只需要关联到已安装对应jdk目录下source.zip源码文件即可
    Kali Linux安装中文输入法
    性能测试(一)——理发店模型
    瑜伽,不仅仅是瑜伽,敬艾扬格大师
    为什么想做测试,我的测试开端
    责任链模式-Chain of responsibility
    后缀数组-基础
  • 原文地址:https://www.cnblogs.com/houxiaowei/p/8196236.html
Copyright © 2011-2022 走看看