验证码

最新推荐文章于 2024-07-16 09:00:00 发布

想要飞翔的小猪

最新推荐文章于 2024-07-16 09:00:00 发布

阅读量132

点赞数 1

分类专栏： css3 js 文章标签： Math对象 css3线性渐变验证码

本文链接：https://blog.csdn.net/dwb123456123456/article/details/82734706

版权

js 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

css3

20 篇文章 0 订阅

订阅专栏

这个验证码不是短信验证码，

具体情况看代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		.code {
			font-family: Arial;
			font-style: italic;
			background: -webkit-linear-gradient(left, red, blue);
			/* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(right, red, blue);
			/* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(right, red, blue);
			/* Firefox 3.6 - 15 */
			background: linear-gradient(to right, red, blue);
			/* 标准的语法 */
			color:#fff;
			font-size: 30px;
			border: 0;
			padding: 2px 3px;
			letter-spacing: 3px;
			font-weight: bolder;
			float: left;
			cursor: pointer;
			width: 150px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			vertical-align: middle;
		}

		input {
			border: 1px solid gray;
			outline: none;
			height: 30px;
			line-height: 30px;
			padding-left: 14px;
			border-radius: 14px;
			font-size: 12px;
		}

		a {

			text-decoration: none;
			font-size: 12px;
			color: #288bc4;
		}

		a:hover {
			text-decoration: underline;
		}

		.code_box {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		.btn_submit {
			height: 0;
			line-height: 0;
			padding-left: 0;
			padding: 15px 30px;
			font-size: 14px;
			background: red;
			color: #ffffff;
			border: 0;
			outline: none;
			cursor: pointer;
		}
	</style>
</head>

<body onload="createCode()">
	<form id="form1" runat="server" onsubmit="validateCode()">
		<div>
			<table border="0" cellspacing="5" cellpadding="5">
				<tr>
					<td>用户名：</td>
					<td>
						<input type="text" id="inputUser" placeholder="请输入用户名" />
					</td>
				</tr>
				<tr>
					<td>密码：</td>
					<td>
						<input type="text" id="inputPwd" placeholder="请输入6-16位的密码" />
					</td>
				</tr>
				<tr class="tr_Code">
					<td>验证码：</td>
					<td class="code_box">
						<input type="text" id="inputCode" placeholder="请输入验证码" />
						<div class="code" id="checkCode" onclick="createCode()"></div>
						<a href="#" onclick="createCode()">看不清换一张</a>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input id="Button1" class="btn_submit" onclick="validateCode();" type="button" value="登录" />
					</td>
					<td></td>
				</tr>
			</table>
		</div>
	</form>
</body>
<script type="text/javascript">
	let code;
	function createCode() {
		code = "";
		let codeLength = 6; //验证码的长度
		let checkCode = document.getElementById("checkCode");
		let codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
			'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'); //所有候选组成验证码的字符，当然也可以用中文的
		for (let i = 0; i < codeLength; i++) {
			let charNum = Math.floor(Math.random() * 61); //主要是这句话
			code += codeChars[charNum];
		}
		if (checkCode) {
			checkCode.className = "code";
			checkCode.innerHTML = code;

		}
	}

	function validateCode() {
		let inputCode = document.getElementById("inputCode").value,
			inputUser = document.getElementById("inputUser").value,
			inputPwd = document.getElementById("inputPwd").value;
		if (inputUser.length <= 0) { //这些验证就不详细写了
			alert("请输入用户名！");
		}
		else if (inputPwd.length <= 0) {
			alert("请输入6-16位的密码！");
		}
		else if (inputCode.length <= 0) {
			alert("请输入验证码！");
		} else if (inputCode.toUpperCase() != code.toUpperCase()) {
			alert("验证码输入有误！");
			createCode();
		} else {
			alert("验证码正确！");
		}
	}
</script>
</body>
</html>

这里主要用的知识有

1.Math.floor(Math.random() * 61)，这句是关键，随机获取数值，Math.radom():随机获取0~1中的一个数字，Math.random() * 61：获取0~61中的随意一个数字；Math.floor()：是向下取整，如Math.floor(5.5)=5;

2.在这里就不得不提Math对象，这个在开发中很常用到，所以可以去了解学习下