js-验证码

最新推荐文章于 2024-07-12 14:34:55 发布

置顶 SHEN_EN

最新推荐文章于 2024-07-12 14:34:55 发布

阅读量1.9k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_42598052/article/details/81064723

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

其实验证码的主要用到了js 中的Math.random(),以及math.floor这两个方法如果在此之前还不懂的可以在这里查阅此方法https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

话不多说上码~

<body onload= "createCode()">
	<div class="wrap">
		<input type="text" id="text" placeholder = "请输入验证码" >
		<a href="javascript:" id="code" onclick="createCode()"></a>
		<input type="button" id="btn" value="验证" onclick="Verification()">
	</div> </body>	<div class="wrap">
		<input type="text" id="text" placeholder = "请输入验证码" >
		<a href="javascript:" id="code" οnclick="createCode()"></a>
		<input type="button" id="btn" value="验证" οnclick="Verification()">
	</div> </body>

<style type="text/css">
	*{ margin: 0; padding: 0; }
		.wrap{
			width: 500px;
			margin: 20px auto;
		}
		#text{
			height: 30px;
			box-sizing: border-box;
			vertical-align: middle;
			text-indent: 1em;
		}
		#code{
			display: inline-block;
			width: 80px; height: 30px;
			background: #aaa;
			text-align: center;
			line-height: 30px;
			color: #fff;
			text-decoration: none;
			letter-spacing: 7px;
			padding-left: 7px;
			vertical-align: middle;
			font-weight: bold;
		}
		#btn{
			width: 60px; height: 30px;
			outline: 0;
			border: #153021;
			background: #499990;
			color: #fff;
			border-radius: 5px;
		}
	</style>

这个是静态铺完之后的样子

接下来我们考虑逻辑部分

获取灰色框框以及按钮的id

var block=document.getElementById('code')
var bt=document.getElementById('btn');

接着定义一个变量用于后面储存长度为4位数的验证码

var code='';//存放验证码

定义一个函数用于创建验证码

function createCode () {
			var codes= [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'];
			var codeLg=4;
			for (var i=0;i<codeLg;i++) {
				var newCode=Math.floor(Math.random()*codes.length)//随机返回1-36之间的数字
				code=code+codes[newCode]; 
			}
			block.innerHTML=code
		}

做到这里

我们会发现每当点击更新验证码的时候，验证码不断叠加。这个bug我们放到后面讲

接下来考虑验证的逻辑

function Verification () {
			var tx=document.getElementById('text').value.toUpperCase()//获取文本框内容转换成大写
			if (tx=='') {
				alert('请输入验证码')
			}else  if(tx!=code) {
				alert('验证错误请重新输入')
				tx='';
				createCode()//重新刷新验证码
			}else{
				alert('success')
			}
		}

最后我们来解决一下前面遗留的bug

看看前面的代码的for循环

		code=''
			var codes= [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'];
			var codeLg=4;
			for (var i=0;i<codeLg;i++) {
				var newCode=Math.floor(Math.random()*codes.length)//随机返回1-36之间的数字
				code=code+codes[newCode]; 
			}
			block.innerHTML=codecode=''
			var codes= [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'];
			var codeLg=4;
			for (var i=0;i<codeLg;i++) {
				var newCode=Math.floor(Math.random()*codes.length)//随机返回1-36之间的数字
				code=code+codes[newCode]; 
			}
			block.innerHTML=code

刚刚之前也说了code边量是用来储存验证码的

也就是说每执行一次for循环就给code变量存放4位数的验证码，而且4位验证码会不断叠加

所以我们每次执行createCode ()之前吧code里面的值清空就不会出现叠加这种情况了

也就是这样

	function createCode () {
			code=''
			var codes= [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'];
			var codeLg=4;
			for (var i=0;i<codeLg;i++) {
				var newCode=Math.floor(Math.random()*codes.length)//随机返回1-36之间的数字
				code=code+codes[newCode]; 
			}
			block.innerHTML=code
		}

好的以上就是js验证码的制作

SHEN_EN

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
js-验证码

其实验证码的主要用到了js 中的Math.random(),以及math.floor这两个方法如果在此之前还不懂的可以在这里查阅此方法https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/randomhttps://developer.mozilla.org/en-US/doc...
复制链接

扫一扫

专栏目录