基于JS实现随机生成的验证码功能

效果显示

实施原则

1.html:一般是一个div: div id=' code'/div，样式是根据需求设计的。

2.JS: 1)将验证码中使用的所有字符放在一个字符串中

2)在该字符串的字符数内，随机生成索引号

3)根据索引号查找对应的字符，并拼接成验证码的字符串

代码实现

HTML:

div id='code'/div

CSS:

* { margin : 0；padd : 0；} div { width: 80pxheight: 30pxfont-size : 18px；线高： 30px；文本对齐：中心；color: # 333border: 1px纯红；margin: 100px自动；cursor:指针；}JavaScript:

var codeStr=' abcdefghijklmnopqrstuvwxyzabbcdefghijklmnopqrstuvwxyz 0123456789 '；var oDiv=document . getelementbyid(' code ')；//用于生成随机整数函数getrandom (n，m) {//param: (number，number)n=number(n)；m=数字(m)；//如果(n m) {var temp=n，请确保m始终大于n；n=m；m=温度；}//return math下有详细说明。地板(数学。random()*(m-n)n)；}//将随机生成的整数下标对应的字母放入div。函数GetCode(){ var str=' '；//如果有多个验证码，循环几次(var I=0；i4；i ) { var ran=getRandom(0，62)；str=codestr . charat(ran)；} oDiv.innerHTML=str} GetCode()；//调用函数，页面刷新会刷新验证码。//点击刷新验证码odiv。onclick=function(){ getcode()；}代码分析

JS:

1)将验证码中使用的所有字符放在一个字符串中

——代码的第一行，除了字母数字字符外，还可以放入汉字等。

2)在该字符串的字符数内，随机生成索引号

-第4行中的函数用于生成随机整数。参数(n，m)是一个数字，数字()保证是一个数字

M n为缺省值，防止参数传输出错，通过if判断后进行修正

math . random()-(0，1)

math . random()*(m - n)-(0，m-n)

Math.random() * (m - n) n - [n，m]

为了得到codeStr的所有下标，如果上面的m是codeStr.length，如果想得到最后一位数字，就用Math.floor()向下舍入。

如果n为0，m为codeStr.length，则随机范围为codeStr的所有元素下标。计算后的示例(n，n，m) - (0，62):下标为[0，61]的整数。

3)根据下标查找对应的元素，拼接成验证码的字符串

第17行的函数getCode()获取字符串中相应的元素，并将它们拼接成一个字符串并返回到页面。最后，点击div继续生成随机验证码。

完全码

！doctype html lang=' en ' head meta charset=' utf-8 ' title随机生成验证码/title style * { margin 3360 0；padd : 0；} div { width: 80pxheight: 30pxfont-size : 18px；线高： 30px；文本对齐：中心；color: # 333border: 1px纯红；margin: 100px自动；cursor:指针；}/style/head body div id=' code '/div script var codeStr=' abcdefghijklmnopqrstuvwxyzabbcdefghijklmnopqrstuvwxyz 0123456789 '；var oDiv=document . getelementbyid(' code ')；//用于生成随机整数函数getrandom (n，m) {//param: (number，number)n=number(n)；m=数字(m)；//如果(n m) {var temp=n，请确保m始终大于n；n=m；m=温度；}返回Math . floor(Math . random()*(m-n)n)；}//将随机生成的整数下标对应的字母放入div。函数GetCode(){ var str=' '；//如果有多个验证码，循环几次(var I=0；i4；i ) { var ran=getRandom(0，62)；str=codestr . charat(ran)；} oDiv.innerHTML=str} GetCode()；//调用函数，页面刷新会刷新验证码。//点击刷新验证码odiv。onclick=function(){ getcode()；}/脚本/正文/html摘要

上面提到的是边肖介绍的基于JS随机生成验证码的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！