欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

js如何實現(xiàn)隨機8位驗證碼

這篇文章主要介紹了js如何實現(xiàn)隨機8位驗證碼，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司致力于成都做網(wǎng)站、成都網(wǎng)站建設(shè),成都網(wǎng)站設(shè)計,集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。 選擇成都創(chuàng)新互聯(lián)公司，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

開發(fā)思路：

1.畫出放置驗證碼的模塊、一個寫有“看不清…”的小塊，以及輸入驗證碼的文本框
2.獲取各個模塊
3.封裝一個函數(shù)Yan_ma（），設(shè)置驗證碼為8位，里面含有數(shù)字，小寫字母，小寫字母和中文。每種類型出現(xiàn)的可能性為25%。
4.隨機數(shù)字在0-9，之間。對Math.ramand（）向下取整。
5.隨機大小寫字母使用fromCharCode() 方法：將 Unicode 編碼轉(zhuǎn)為一個字符，例如：

var n = String.fromCharCode(65);
cosole.log(n);
//輸出j結(jié)果為A

大寫字母（65-91） 小寫字母（97-123）

var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));

6.隨機中文，聲明變量letter放置中文字符串，使用charAt()隨機在letter中獲得某個漢字。

var letter = "如若可以親愛的請許我青燈墨下執(zhí)一筆素箋今生為你吟盡千回百轉(zhuǎn)念";
var s = letter.charAt(Math.floor(Math.random() * letter.length));

7.給每位驗證碼設(shè)隨機的顏色，字體大小，相對文本位置，旋轉(zhuǎn)角度。給顏色封裝一個函數(shù)，使用十六進(jìn)制顏色（如：#ffffff）

//隨機顏色
 function fontcolor(){
    var s1="";
    for(var k=0;k<6;k++){
     var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
     var m=z[Math.floor(Math.random() * z.length)];
     s1 +=m;
    }
    return "#"+s1;
   }

隨機位置和隨機旋轉(zhuǎn)角度的方法相同

隨機位置可能為向上下左右偏移 8px, 隨機旋轉(zhuǎn)角度可能為繞著z軸旋轉(zhuǎn)（±45度）。

8.提前聲明一個空字符串 str 讓每位驗證碼用字符串連接起來.

var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
 arr+=s;

9.讓8位驗證碼出現(xiàn)在第一個大模塊中的innerHTML中。

10.給寫有“看不清”的span標(biāo)簽添加點擊事件，點擊時，調(diào)用函數(shù)Yan_ma，刷新驗證碼。

11.如果輸入的驗證碼不正確，則彈出“驗證成功”，否則彈出“驗證失敗”。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>隨機驗證碼</title>
 <script>
  var arr="";
  window.onload=function() {
   var maa = document.getElementsByClassName("block")[0];
   var looking = document.getElementById("look");
   var put = document.getElementById("text");
   var btnn = document.getElementById("btn");
   Yan_ma(maa);
   looking.onclick=function (){
    Yan_ma(maa);
   };
   btnn.onclick=function(){
    if(put.value.toLowerCase()==arr.toLowerCase()){
     alert ("驗證成功");
    }
    else{
     alert ("驗證失敗");
     Yan_ma(maa);
    }
   }

  };


    function Yan_ma(aim) {
    arr ="";
    var str="";
    for (var i = 0; i < 8; i++) {
     //隨機數(shù) Math.random 0-1 的隨機值
     var n = Math.random();
     //隨機顏色
     var color=fontcolor();
     //隨機大小
     var size=Math.floor (Math.random ()*12 +20);
     //隨機位置
     var g=Math.random() <0.5 ? -1: 1;
     var topset=Math.random ()*g*8;
     //隨機旋轉(zhuǎn)
     var h=Math.random() <0.5 ? -1: 1;
     var zhuan=Math.random ()*h*45;
     if (n < 0.25) {
      //隨機數(shù)字
      var s = Math.floor(Math.random() * 10);
      str+="<span style='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
      arr+=s;
     }
     //隨機大寫字母 //65-91
     else if (n >= 0.25 && n < 0.5) {
      var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
      str+="<span style='transform:rotatez("+ zhuan +"deg); left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
      arr+=s;
     }
     //隨機小寫字母 97-123
     else if (n >=0.5 && n < 0.75) {
      var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
      str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
      arr+=s;
     }
     //隨機文字
     else {
      var letter = "如若可以親愛的請許我青燈墨下執(zhí)一筆素箋今生為你吟盡千回百轉(zhuǎn)念";
      var s = letter.charAt(Math.floor(Math.random() * letter.length));
      str+="<span style='transform: rotatez("+ zhuan +" deg) ; left:"+topset+"px; color: " +color +";font-size:"+size+"px;top:"+topset+"px '>"+s+"</span>";
      arr+=s;
     }
    }
    aim.innerHTML =str;
   }

   function fontcolor(){
    var s1="";
    for(var k=0;k<6;k++){
     var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
     var m=z[Math.floor(Math.random() * z.length)];
     s1 +=m;
    }
    return "#"+s1;
   }

 </script>
 <style>
  .block{
   width:250px;
   height:60px;
   background:url("bg2.png") no-repeat center;
   background-size: 100%;
   text-align: center;
   line-height: 60px;
  }
  .block span{
   position: relative;
   display: inline-block;
   width:20px;
   margin:5px 3px;
  }
  #look{
   color: #9200ff;
  }
  #look:hover{
   cursor: pointer;
  }
 </style>
</head>
<body>
<div class="block">
</div>
<span id="look">看不清...</span>
<br/>
<input type="text" id="text" placeholder="請輸入驗證碼" />
<button id="btn">驗證</button>
</body>
</html>

出現(xiàn)的驗證碼

js如何實現(xiàn)隨機8位驗證碼

當(dāng)輸入正確驗證碼時

js如何實現(xiàn)隨機8位驗證碼

當(dāng)沒輸入錯誤驗證碼時

js如何實現(xiàn)隨機8位驗證碼

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js如何實現(xiàn)隨機8位驗證碼”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

本文題目：js如何實現(xiàn)隨機8位驗證碼
鏈接URL：http://chinadenli.net/article46/pgjjhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站營銷、外貿(mào)建站、自適應(yīng)網(wǎng)站、Google、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司