js隨機(jī)生成一個(gè)驗(yàn)證碼
之前接觸過的驗(yàn)證碼都是圖片,今天碰到了一個(gè)用js生成隨機(jī)驗(yàn)證碼的demo,拿來敲一敲和大家分享。
效果:
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 是對一個(gè)數(shù)字向下取整,之前在博客里面有提到過。
charAt方法可返回指定位置的字符,之前在博客里面也有提到過。
這些都已經(jīng)很熟悉了,就當(dāng)作是復(fù)習(xí)一遍吧。
拿到隨機(jī)的四個(gè)數(shù)字,拼接到div標(biāo)簽里。就得到了想要的效果。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)隨機(jī)數(shù)字字母驗(yàn)證碼
- JS如何生成隨機(jī)驗(yàn)證碼
- JavaScript 隨機(jī)驗(yàn)證碼的生成實(shí)例代碼
- 用jsp頁面生成隨機(jī)的驗(yàn)證數(shù)字碼示例
- JavaScript實(shí)現(xiàn)隨機(jī)五位數(shù)驗(yàn)證碼
- 基于JS實(shí)現(xiàn)一個(gè)隨機(jī)生成驗(yàn)證碼功能
- js實(shí)現(xiàn)隨機(jī)8位驗(yàn)證碼
- JS實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼
- JS 實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能
- Javascript實(shí)現(xiàn)仿QQ隨機(jī)數(shù)驗(yàn)證
相關(guān)文章
javascript設(shè)計(jì)模式 – 模板方法模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 模板方法模式原理,結(jié)合實(shí)例形式分析了javascript模板方法模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04js實(shí)現(xiàn)右下角可關(guān)閉最小化div(可用于展示推薦內(nèi)容)
使用Javascript實(shí)現(xiàn)右下角可關(guān)閉最小化div,可以用于展示推薦內(nèi)容,完整源代碼如下,感興趣的各位可以參下哈,希望對大家有所幫助2013-06-06Javascript中找到子元素在父元素內(nèi)相對位置的代碼
因?yàn)橄胱詣?dòng)定位到子元素,所以一直在找各種找尋元素位置的代碼。 不過總是找不到可以定位子元素相對位置的代碼2012-07-07js實(shí)現(xiàn)網(wǎng)頁計(jì)算器
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05使用json對象轉(zhuǎn)化為key,value的對象數(shù)組
這篇文章主要介紹了使用json對象轉(zhuǎn)化為key,value的對象數(shù)組方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06JavaScript預(yù)解析及相關(guān)技巧分析
這篇文章主要介紹了JavaScript預(yù)解析及相關(guān)技巧,結(jié)合實(shí)例形式分析了JavaScript與解析的原理,步驟與相關(guān)技巧,需要的朋友可以參考下2016-04-04uploadify插件實(shí)現(xiàn)多個(gè)圖片上傳并預(yù)覽
這篇文章主要為大家詳細(xì)介紹了uploadify插件實(shí)現(xiàn)多個(gè)圖片上傳并預(yù)覽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09微信小程序外賣選購頁實(shí)現(xiàn)切換分類與數(shù)量加減功能案例
這篇文章主要介紹了微信小程序外賣選購頁實(shí)現(xiàn)切換分類與數(shù)量加減功能,結(jié)合具體實(shí)例形式分析了微信小程序狀態(tài)記錄、判定及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-01-01