快捷導(dǎo)航

原生js實(shí)現(xiàn)數(shù)字字母混合驗(yàn)證碼的簡(jiǎn)單實(shí)例

更新時(shí)間：2015年12月10日 08:58:49 作者：樂觀地摸摸頭

這篇文章主要介紹了原生js實(shí)現(xiàn)數(shù)字字母混合驗(yàn)證碼的簡(jiǎn)單實(shí)例，注釋很詳細(xì)，感興趣的小伙伴們可以參考一下

本文實(shí)例講述了原生js實(shí)現(xiàn)數(shù)字字母混合驗(yàn)證碼的全部代碼，重點(diǎn)是注釋很詳細(xì)，便于大家理解，特分享給大家供大家參考。具體如下：
運(yùn)行效果截圖如下：

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <title></title>
  <style type="text/css">
    body, div {
      margin: 0;
      padding: 0;
      font-size: 18px;
      font-family: "微軟雅黑";
      -webkit-user-selelct: none;
    }

    #code {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -50px;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #ff0000;
      cursor: pointer;
      letter-spacing: 5px;
    }
  </style>
</head>
<body>
<div id="code">
  xdF2
</div>
<script type="text/javascript">
  //當(dāng)前驗(yàn)證碼獲取的隨即范圍
  var codeStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  //思想：0-61索引 只需要隨機(jī)生成4個(gè)索引，然后charAt可以獲取隨機(jī)4個(gè)索引。
  var oDiv = document.getElementById("code");

  function getRandom(n, m) {
    n = Number(n);       //轉(zhuǎn)換n,m，結(jié)果不是數(shù)字就是NaN
    m = Number(m);
    if (isNaN(n) || isNaN(m)) {     //判斷n,m,是不是有效數(shù)字，如果n或m其中一個(gè)傳入的不是數(shù)字
      return Math.random();      //返回 【0-1）之間的隨機(jī)小數(shù)
    }
    if (n > m) {             //如果n大于m，則交換位置
      var temp = n;
      n = m;
      m = temp;
    }
    return Math.round(Math.random() * (m - n) + n);          //返回，取m,n之間的隨機(jī)整數(shù)。
  }


  function getCode() {       
    var str = "";　　　　　　　　//定義一個(gè)空字符串備用
    for (var i = 0; i < 4; i++) {    //遍歷4個(gè)索引
      var ran = getRandom(0, 61);      //調(diào)用getRandom方法，隨機(jī)獲取一個(gè)索引0-61里的隨機(jī)索引
      str += codeStr.charAt(ran);      //把codeStr字符串里，我們指定獲取ran（這個(gè)4個(gè)索引）；
    }
    oDiv.innerHTML = str;       //呈現(xiàn)在頁(yè)面上
  }

  getCode();              //調(diào)用方法
          
  oDiv.onclick = function () {
    getCode();
  }
</script>
</body>
</html>

您可能感興趣的文章:

相關(guān)文章

javascript 異步的innerHTML使用分析
利用innerHTML代替createElement來動(dòng)態(tài)添加網(wǎng)頁(yè)內(nèi)容已成為一種普遍的認(rèn)識(shí)。但在商務(wù)應(yīng)用，大數(shù)據(jù)的datagrid屢見不鮮，就算是innerHTML也捉襟見肘，于是人們又開發(fā)了分時(shí)加載的技術(shù)了（利用setTimeout）。
2009-12-12
from表單多個(gè)按鈕提交用onclick跳轉(zhuǎn)不同action
這篇文章主要介紹了from表單多個(gè)按鈕提交用onclick跳轉(zhuǎn)不同action,需要的朋友可以參考下
2014-04-04
全面解析Bootstrap中transition、affix的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中transition、affix的使用方法，感興趣的朋友可以參考一下
2016-05-05
JavaScript實(shí)現(xiàn)的反序列化json字符串操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的反序列化json字符串操作,結(jié)合實(shí)例形式分析了eval與JSON.parse兩種反序列化json字符串的相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
javascript代碼編寫需要注意的7個(gè)小細(xì)節(jié)小結(jié)
每種語(yǔ)言都有它特別的地方，對(duì)于JavaScript來說，使用var就可以聲明任意類型的變量，這門腳本語(yǔ)言看起來很簡(jiǎn)單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗(yàn)的。本文利列舉了JavaScript初學(xué)者應(yīng)該注意的七個(gè)細(xì)節(jié)，與大家分享。
2011-09-09
js實(shí)現(xiàn)網(wǎng)頁(yè)圖片輪換播放
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)圖片輪換播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
JavaScript通過RegExp實(shí)現(xiàn)客戶端驗(yàn)證處理程序
通過RegExp實(shí)現(xiàn)客戶端驗(yàn)：讓文本框只允許輸入數(shù)字、文本框只允許輸入中文、郵箱輸入格式的判斷等等，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-05-05
javascript實(shí)現(xiàn)回到頂部特效
當(dāng)頁(yè)面特別長(zhǎng)的時(shí)候，用戶想回到頁(yè)面頂部，必須得滾動(dòng)好幾次滾動(dòng)鍵才能回到頂部，如果在頁(yè)面右下角有個(gè)“返回頂部”的按鈕，用戶點(diǎn)擊一下，就可以回到頂部，對(duì)于用戶來說，是一個(gè)比較好的體驗(yàn)。
2015-05-05
微信小程序獲取用戶openid的方法詳解
小程序的openid相當(dāng)重要,它是用戶的唯一標(biāo)識(shí)id,牽扯的支付,登錄,授權(quán)等,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶openid的相關(guān)資料,需要的朋友可以參考下
2022-04-04
JS將滑動(dòng)門改為選項(xiàng)卡（需鼠標(biāo)點(diǎn)擊）的實(shí)現(xiàn)方法
這篇文章主要介紹了JS將滑動(dòng)門改為選項(xiàng)卡（需鼠標(biāo)點(diǎn)擊）的實(shí)現(xiàn)方法,涉及JavaScript頁(yè)面元素遍歷及樣式替換的相關(guān)技巧,再通過onmouseover與onclick即可分別實(shí)現(xiàn)滑動(dòng)門與選項(xiàng)卡兩種效果,需要的朋友可以參考下
2015-09-09