js隨機(jī)生成一個(gè)驗(yàn)證碼

更新時(shí)間：2021年04月29日 11:42:37 作者：AmberWu

這篇文章主要為大家詳細(xì)介紹了js隨機(jī)生成一個(gè)驗(yàn)證碼的具體方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

之前接觸過(guò)的驗(yàn)證碼都是圖片，今天碰到了一個(gè)用js生成隨機(jī)驗(yàn)證碼的demo，拿來(lái)敲一敲和大家分享。

效果：

html代碼：

<p>驗(yàn)證碼：</p>
 <div id="login" onclick="change()">
  <a href="#" rel="external nofollow" ></a>
 </div>

給div設(shè)置了一個(gè)click點(diǎn)擊事件，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;

定義一個(gè)變量，令它的值為26個(gè)字母和0-9十個(gè)數(shù)字。

Math.random()是令系統(tǒng)隨機(jī)選取大于等于 0.0 且小于 1.0 的偽隨機(jī)double 值。
例如：Math.random()*62 得到的值：

Math.floor 是對(duì)一個(gè)數(shù)字向下取整，之前在博客里面有提到過(guò)。

charAt方法可返回指定位置的字符，之前在博客里面也有提到過(guò)。

這些都已經(jīng)很熟悉了，就當(dāng)作是復(fù)習(xí)一遍吧。

拿到隨機(jī)的四個(gè)數(shù)字，拼接到div標(biāo)簽里。就得到了想要的效果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript 獲取iframe里頁(yè)面中元素值的方法
本篇文章主要是對(duì)javascript獲取iframe里頁(yè)面中元素值的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)（三）仿微信應(yīng)用
這篇文章主要介紹了JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)（三）仿微信應(yīng)用的相關(guān)資料,需要的朋友可以參考下
2015-12-12
Cropper.js 實(shí)現(xiàn)裁剪圖片并上傳(PC端)
本案例是參考cropper站點(diǎn)實(shí)例，進(jìn)行修改簡(jiǎn)化。接下來(lái)通過(guò)本文給大家分享Cropper.js 實(shí)現(xiàn)裁剪圖片并上傳(PC端) 功能，需要的朋友參考下吧
2017-08-08
javascript檢測(cè)是否聯(lián)網(wǎng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript檢測(cè)是否聯(lián)網(wǎng)的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2014-09-09
JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法
這篇文章主要介紹了JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法,實(shí)例分析了javascript針對(duì)節(jié)點(diǎn)元素的替換、刪除及常用的幾種添加技巧,需要的朋友可以參考下
2016-06-06
微信APP生命周期及頁(yè)面生命周期示例詳解
這篇文章主要為大家介紹了微信APP生命周期及頁(yè)面生命周期當(dāng)然示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪
2022-04-04
微信小程序?qū)崿F(xiàn)單選功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
js帶縮略圖的圖片輪播效果代碼分享
這篇文章主要介紹了js帶縮略圖的圖片輪播效果，圖片輪播效果特別適合做產(chǎn)品展示，感興趣的小伙伴可以參考下。
2015-09-09
JS控制靜態(tài)頁(yè)面之間傳遞參數(shù)獲取參數(shù)并應(yīng)用的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS控制靜態(tài)頁(yè)面之間傳遞參數(shù)獲取參數(shù)并應(yīng)用的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08