暑期学习日记27：js实现验证码生成与检验

VIP文章土肥圆波太郎

已于 2022-08-14 23:41:29 修改

阅读量331

点赞数

文章标签：学习

于 2022-08-14 22:48:51 首次发布

本文链接：https://blog.csdn.net/weixin_48485475/article/details/126337716

版权

今日学习了验证码的生成与检验，逻辑为：

1.加载页面时自动随机生成数字验证码。

2.点击看不清，更换验证码重新生成验证码。

3.点击确定按钮检验输入框内的值与验证码是否相等，不相等时弹出警告并清空输入框和刷新验证码。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>验证码</title>
	<style>
		#checkcode{
			background-color:lightgray;
			color: blue;
			font-size: 30px;
		}
		#renew{
			color: blue;
			text-decoration:underline;
			cursor:pointer; 
		}
	</style>
</head>
<body>
	<div>
	<span id="checkcode">858158</span>
	<a id="renew">看不清，换一张</a>
	</div>
	<div>
	<p>验证码：<input type="text" id="inputcode"></p>
	<button id="check">确定</button>
	</div>
	<script>
		//加载时生成验证码
		window.onload=function(){
			var res=getcode();
		function getcode(){