JS模拟验证码的生成

最新推荐文章于 2022-12-07 11:32:10 发布

wj_秦桑低绿枝

最新推荐文章于 2022-12-07 11:32:10 发布

阅读量545

点赞数

文章标签： js 随机 document操作

本文链接：https://blog.csdn.net/qinsangdilvzhi/article/details/88418254

版权

我们常见的验证码是由字母和数字组成，并且默认大小写一样。于是，我们可以点击随机生成新的验证码。
在这里插入图片描述

验证码.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <style>
 * {
 margin:0;
 padding:0;
 font-size:14px;
 }
 #codeBox{
 margin:20px auto;
 width:200px;
 height:50px;
 border:1px solid green;
 line-height:50px;
 text-align:center;
 letter-spacing:5px;
 cursor:pointer;
 font-size:20px;
 -webkit-user-select:none;
 }
 </style>
 <div id="codeBox"></div><!--展示-->
  <script src="验证码.js"></script>
 </body>
</html>

验证码.js

var codeBox=document.getElementById('codeBox');

function queryCode(){
var areaStr="123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPLKJHGFDASZXCVBNM";

var result='';
for(var i=0;i<4;i++){
	var ran=Math.round(Math.random()*60),
		char=areaStr[ran];
	if(result.toLowerCase().indexOf(char.toLowerCase())>-1)
	{
		i--;
		continue;
	}
	result+=char;
}
codeBox.innerHTML=result;
}

queryCode();
codeBox.onclick=queryCode;

wj_秦桑低绿枝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS模拟验证码的生成

我们常见的验证码是由字母和数字组成，并且默认大小写一样。于是，我们可以点击随机生成新的验证码。验证码.html&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content=&quo
复制链接

扫一扫