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日

  

 

     


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM