首頁 > web前端 > js教程 > JS如何隨機產生一個驗證碼的範例程式碼分享

JS如何隨機產生一個驗證碼的範例程式碼分享

黄舟
發布: 2017-06-01 09:14:47
原創
2225 人瀏覽過

這篇文章主要為大家詳細介紹了js隨機產生一個驗證碼的具體方法,具有一定的參考價值,有興趣的小夥伴們可以參考一下

之前接觸過的驗證碼都是圖片,今天碰到了一個用js產生隨機驗證碼的demo,拿來敲一敲和大家分享。

效果:

html程式碼:

<p>验证码:</p>
 <p id="login" onclick="change()">
  <a href="#" rel="external nofollow" ></a>
 </p>
登入後複製

給p設定了一個click點擊事件,js程式碼如下:

 function getCode(n) {
  var all = "azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
  var b = "";
  for (var i = 0; i < n; i++) {
   var index = Math.floor(Math.random() * 62);
   b += all.charAt(index);

  }
  return b;
 };

 function change() {
  document.getElementById("login").innerHTML = getCode(4);

 }
 window.onload = change;
登入後複製

定義一個變數,令它的值為26個字母和0-9十個數字。

Math.random()是令系統隨機選取大於等於 0.0 且小於 1.0 的偽隨機double 值。
例如:Math.random()*62 得到的值:

#Math.floor 是對一個數字往下取整,之前在部落格裡面有提到過。

charAt方法可傳回指定位置的字符,之前在部落格裡面也有提到過。

這些都已經很熟悉了,就當作是複習一遍吧。

拿到隨機的四個數字,拼接到p標籤裡。就得到了想要的效果。

以上是JS如何隨機產生一個驗證碼的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板