JavaScript随机生成验证码

Posted 2021-06-11 是小叶的呢.

效果图如下所示：


它的效果是点击随机生成验证码。
首先我们来看一下布局如下：

<input type="text" class="code" placeholder="请输入验证码">
<input type="button" id="code" onclick="change();" value="PxOy99">

它的布局非常简单，两个input标签；placeholder 属性提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
Type=”text”定义用户可输入文本的单行输入字段。
Type=“button”定义可点击的按钮。
javascript部分如下：

//验证码
	function change() {
	    var code = document.getElementById("code");
	    // 验证码的组成
	    var moreCode = new Array(
				'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
				'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
				'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
				'u', 'v', 'w', 'x', 'y', 'z',
				'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
				'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
				'U', 'V', 'W', 'X', 'Y', 'Z'
		);
	    codes = '';// 重新初始化验证码
	    for (var i = 0; i < 6; i++) {
	        // 随机获取一个数组
	        var a = parseInt(Math.random() * moreCode.length);
	        codes += moreCode[a];
	    }
	    // 验证码添加到input里
	    document.getElementById("code").value = codes;


	}

（1） 首先获取ID。
（2） 利用数组做一个验证码的组成。
（3） For循坏判断i是否大于6，i自增，声明一个变量，通过Math对象的random（）方法在moreCode数组里面随机获取一个6位的验证码，length指的是长度；然后赋值给codes。
（4） 最后把验证码添加到input标签里面。
这样就可以随机获取验证啦。