JS 用画布生成验证码随机数

最新推荐文章于 2024-07-30 10:56:44 发布

穿条秋裤吧

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量207

点赞数 1

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_66523895/article/details/126875377

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	</style>
	<body>
		<div>
			<input type="text">
			<button onclick="fun()">判断</button>
		</div>
		<div>
			<canvas id="myCanvas"></canvas>
		</div>

		<script>
			let data;
			let inp = document.getElementsByTagName('input')[0];
			let butt = document.getElementsByTagName('button')[0];
			let can = document.getElementById('myCanvas');

			fu()

			function fu() {
				
				var c = document.getElementById("myCanvas");//获取画布
				var ctx = c.getContext("2d");//实例画布
				ctx.fillStyle = "#00EE00";//画布背景色
				// 第一个随机数
				let str1 = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';//随机数1
				let arr1 = Math.floor(Math.random() * str1.length)
				data1 = '';
				data1 += str1[arr1] + ' ';
				console.log(data1);
				var c1 = parseInt(Math.random() * 256);
				var c2 = parseInt(Math.random() * 256);
				var c3 = parseInt(Math.random() * 256);
				var rgb = "rgb(" + c1 + "," + c2 + "," + c3 + ")";
				ctx.fillRect(20, 20, 130, 70);
				ctx.font = "30px Arial";
				ctx.fillStyle = rgb;
				ctx.fillText(data1, 35, 60);
				// 第二个随机数
				let str2 = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';//随机数2
				let arr2 = Math.floor(Math.random() * str2.length)
				data2 = '';
				data2 += str2[arr2] + ' ';
				console.log(data2);
				var c11 = parseInt(Math.random() * 253);
				var c22 = parseInt(Math.random() * 253);
				var c33 = parseInt(Math.random() * 253);
				var rgb2 = "rgb(" + c11 + "," + c22 + "," + c33 + ")";
				ctx.fillStyle = rgb2;
				ctx.fillText(data2, 60, 60);
				// 第三个随机数
				let str3 = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';//随机数3
				let arr3 = Math.floor(Math.random() * str3.length)
				data3 = '';
				data3 += str3[arr3] + ' ';
				console.log(data3);
				var c111 = parseInt(Math.random() * 253);
				var c222 = parseInt(Math.random() * 253);
				var c333 = parseInt(Math.random() * 253);
				var rgb3 = "rgb(" + c111 + "," + c222 + "," + c333 + ")";
				ctx.fillStyle = rgb3;
				ctx.fillText(data3, 85, 60);
				// 第四个随机数
				let str4 = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';//随机数4
				let arr4 = Math.floor(Math.random() * str3.length)
				data4 = '';
				data4 += str4[arr4] + ' ';
				console.log(data4);
				var c1111 = parseInt(Math.random() * 253);
				var c2222 = parseInt(Math.random() * 253);
				var c3333 = parseInt(Math.random() * 253);
				var rgb4 = "rgb(" + c1111 + "," + c2222 + "," + c3333 + ")";
				ctx.fillStyle = rgb4;
				ctx.fillText(data4, 110, 60);
				
                data = data1 + data2 + data3 +data4;
			}


			document.onkeydown = function(event) {
				if (event.keyCode == 13) {
					console.log(data);
					let arr = '';
					for (let i = 0; i < inp.value.length; i++) {
						arr += inp.value[i] + ' '
					}
					console.log(arr);
					if (arr == data) {
						alert('正确');
					} else {
						alert('错误')
					}
				}
			}



			can.onclick = function() {
				fu()
			}


			function fun() {
				console.log(data);
				let arr = '';
				for (let i = 0; i < inp.value.length; i++) {
					arr += inp.value[i] + ' '
				}
				console.log(arr);
				if (arr == data) {
					alert('正确');
				} else {
					alert('错误')
				}
			}
		</script>
	</body>
</html>

上面的方案生成的验证码颜色是随机的，还有一种循环生成随机数的方法，但是生成的数字颜色相同，如果对数字颜色相同没要求，可采用，代码量少于上面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	</style>
	<body>
		<div>
			<input type="text">
			<button onclick="fun()">判断</button>
		</div>
		<div>
			<canvas id="myCanvas"></canvas>
		</div>

		<script>
			let data;
			let inp = document.getElementsByTagName('input')[0];
			let butt = document.getElementsByTagName('button')[0];
			let can = document.getElementById('myCanvas');

			fu()

			function fu() {
				let str = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';
				data = '';
				for (let i = 0; i < 4; i++) {
					let arr = Math.floor(Math.random() * str.length)
					data += str[arr] + ' ';
				}
				var c1 = parseInt(Math.random() * 256);
				var c2 = parseInt(Math.random() * 256);
				var c3 = parseInt(Math.random() * 256);
				var rgb = "rgb(" + c1 + "," + c2 + "," + c3 + ")";
				var c = document.getElementById("myCanvas");
				var ctx = c.getContext("2d");
				ctx.fillStyle = "#000000";
				ctx.fillRect(20, 20, 130, 70);
				ctx.font = "30px Arial";
				ctx.fillStyle = rgb;
				ctx.fillText(data, 35, 60);
			}


			document.onkeydown = function(event) {
				if (event.keyCode == 13) {
					console.log(data);
					let arr = '';
					for (let i = 0; i < inp.value.length; i++) {
						arr += inp.value[i] + ' '
					}
					console.log(arr);
					if (arr == data) {
						alert('正确');
					} else {
						alert('错误')
					}
				}
			}



			can.onclick = function() {
				fu()
			}


			function fun() {
				console.log(data);
				let arr = '';
				for (let i = 0; i < inp.value.length; i++) {
					arr += inp.value[i] + ' '
				}
				console.log(arr);
				if (arr == data) {
					alert('正确');
				} else {
					alert('错误')
				}
			}
		</script>
	</body>
</html>