JS-DOM操作，实现验证码显示实验(数组、随机数、DOM查找部分getElementById)

最新推荐文章于 2024-02-28 15:16:49 发布

¡Venceremo

最新推荐文章于 2024-02-28 15:16:49 发布

阅读量331

点赞数

分类专栏： javascript 文章标签： JavaScript 验证码 HTML CSS 随机生成

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125913892

版权

javascript 专栏收录该内容

133 篇文章 0 订阅

订阅专栏

先完成CSS/HTML代码

之后使用内嵌的方式-实现JS代码---此部部分的主要功能是产生验证码并且显示出来-使用函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<style type="text/css">
		#code{
			/*设置样式*/
			width: 100px;
			height: 50px;
			background-color: lightblue;
			font-size: 44px;/*字号大小*/
			letter-spacing: 5px;/*字符间距*/

		}
	</style>
	
</head>
<body>
	<!-- 设置样式 显示验证码的区域 -->
	<div id="code"></div>
	<!-- 添加按钮 并且 当按钮被单击是具有一个操作（函数）-产生验证码 -->
	<button onclick="creatrndcode()">验证码</button>
	<script type="text/javascript">
		function creatrndcode(){ //产生验证码的函数
			// 定义一个数组 数组保存了验证码可以出现的所有字符
			var chars = ['a','b','f','2','1','9','0']; //length=7
			// 定义字符串------------用于保存最终产生的随机验证码
			var randCode = "";
			// 产生验证码的过程
			for(var i=0;i<3;i++){
				var randPos = Math.floor(Math.random()*(chars.length));//下标 0-length-1 之间的数字 取整
				randCode += chars[randPos]
			}

			//最终将产生的验证码显示再某一区域中 innerHTML
			document.getElementById('code').innerHTML =randCode;
		}
	</script>
			
</body>
</html>