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