用Javascript实现随机验证码

思路：这个验证码脚本和随机抽取的思路是差不多的。先把一组数字和字母放入数组chars中，再应用Math对象下的几个API生成随机数，利用for循环语句循环4次，拼接到每次循环的后面即可。

- HTML部分

<div id="code"></div>
<button onclick="creatCode()">验证码</button>

- JS部分

1.用数组chars保存验证码里出现的字符

var chars = ['A', 'B', 'C', 'D', 'a', 'b', 'c', 'd', '0', '1', '2', '3']

2.定义一个初始值为空的字符串变量为最终产生的随机验证码

var randCode = " ";

3.利用for循环将生成的动作重复4次

 for (var i = 0; i < 4; i++) {}

4.随机获取0~9的一个整数，作为下标找元素，再与数组chars下标相乘，接着再用floor()这个API取整，定义为randPosition（关键部分）

for (var i = 0; i < 4; i++) {var randPosition = Math.floor( Math.random() * (chars.length - 1))}

5.利用自加+=将随机生成的字符连接到自身的后边

for (var i = 0; i < 4; i++) {var randPosition = Math.floor( Math.random() * (chars.length - 1))
randCode += chars[randPosition];
}

6.生成结束后，将内容显示到页面中

 document.getElementById("code").innerHTML = randCode;

- 结果展示

- 总体代码

<body><div id="code"></div><button onclick="creatCode()">验证码</button><script>function creatCode() {var chars = ['A', 'B', 'C', 'D', 'a', 'b', 'c', 'd', '0', '1', '2', '3'];  var randCode = "";  for (var i = 0; i < 4; i++) {var randPosition = Math.floor(Math.random() * (chars.length - 1)); randCode += chars[randPosition];}document.getElementById("code").innerHTML = randCode;}</script>
</body>

用Javascript实现随机验证码相关推荐

JavaScript 生成随机验证码
JavaScript 生成随机验证码文章目录 JavaScript 生成随机验证码 Math对象下 random方法
javascript之随机验证码
随机验证码随机的数字: function numcode(n) {var arr=[];for (let i = 0; i < n; i++) {var num=parseInt(Math.r ...
html获取随机字母,JavaScript实现4位随机验证码的生成
这篇文章主要为大家详细介绍了JavaScript实现4位随机验证码的生成,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JavaScript生成4位 ...
表单验证JavaScript实现正则匹配、随机验证码、密码强度、加拖拽加蒙板
要求实现如下功能: 1.正则匹配用户名邮箱密码手机号 2.随机验证码 3.密码强度 4.加拖拽加蒙版 html代码 <div id="mask">< ...
Javascript 随机验证码
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
用ajax写验证码随机数,JavaScript随机验证码
利用canvas制作一个随机验证码: 1.clearRect:context.clearRect(x,y,width,height);清空给定矩形内的指定像素 2.fillStyle:设置画笔的颜色 ...
随机验证码（数字和字母组成）及toLowerCase() 字符串转小写方法和toUpperCase（）字符串转大写方法...
JavaScript toLowerCase() 方法和toUpperCase()方法 toLowerCase()方法定义:toLowerCase() 方法用于把字符串转换为小写. 语法:var s ...
随机验证码如何在html里设置颜色,js随机生成验证码以及随机颜色
Javascript通过Math.random()随机生成验证码. 代码如下: 随机验证码 .p1{ width:100px; height:30px; border:1px solid black; ...
Java代码生成随机验证码、验证数
/*** 业务编码生成规则*/ public class CodeGeneratorUtil {static final IdGen IDG = IdGen.get();/*** 生成业务编码* @p ...

用Javascript实现随机验证码

用Javascript实现随机验证码

- HTML部分

- JS部分

- 结果展示

- 总体代码

用Javascript实现随机验证码相关推荐

最新文章

热门文章