JavaScrip实现点击切换验证码及校验

最新推荐文章于 2023-10-07 23:55:20 发布

原创最新推荐文章于 2023-10-07 23:55:20 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

18 篇文章

订阅专栏

JavaScript

16 篇文章

订阅专栏

这篇博客介绍了一个用HTML、CSS和JavaScript实现的简单验证码验证系统。用户点击生成新的四位数验证码，输入后点击注册按钮进行验证。如果输入正确，会显示等待消息并延迟跳转到注册页面；输入错误则提示验证码错误并重新生成验证码。

效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div {
			width: 100px;
			height: 40px;
			background-color: red;
			color: #fff;
			text-align: center;
			line-height: 40px;
			font-size: 30px;
			font-weight: 900;
			user-select: none;
		}

		.show {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 200px;
			height: 100px;
			background-color: pink;
			text-align: center;
			line-height: 100px;
			font-size: 40px;
			font-weight: 900;
			display: none;
		}
	</style>
</head>

<body>

	<div></div>
	<input type="text" value="请输入上图的验证码" />
	<button>注册</button>
	<div class="show">等待中。。。。</div>
	<script type="text/javascript">

		//1000-9999
		var div = document.getElementsByTagName("div");
		var inp = document.getElementsByTagName("input")[0];
		var btn = document.getElementsByTagName("button")[0];
		div[0].innerHTML = ranFun(1000, 9999);

		inp.onclick = function () {
			this.value = ""
		}

		div[0].onclick = function () {
			this.innerHTML = ranFun(1000, 9999)
		}

		btn.onclick = function () {
			if (inp.value == div[0].innerHTML) {
				div[1].style.display = "block";
				setTimeout(function () {
					location.href = "register.html"
				}, 3000)
			} else {
				alert('验证码错误')
				div[0].innerHTML = ranFun(1000, 9999);
				inp.value = ""
			}
		}



		function ranFun(a, b) {
			return Math.floor(Math.random() * (b - a + 1) + a)
		}
	</script>
</body>

</html>