前端随机密码生成 + 内容复制

最新推荐文章于 2024-07-25 13:55:35 发布

時間不夠以後

最新推荐文章于 2024-07-25 13:55:35 发布

阅读量361

点赞数

分类专栏： JavaScript 效果实现文章标签： html css js

本文链接：https://blog.csdn.net/weixin_43972213/article/details/119531881

版权

JavaScript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

效果实现

19 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#button {
				font-family: sans-serif;
				font-size: 15px;
				margin-top: 20px;
				border: 2px solid rgb(20, 139, 250);
				width: 155px;
				height: 50px;
				text-align: center;
				background-color: #0c81ee;
				color: #F8F8F8;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				border-radius: 7px;
			}

			.btn2 {
				margin-left: 85px;
			}

			#button:hover {
				color: white;
				background-color: black;
			}
			#password {
				font-family: sans-serif;
				font-size: 15px;
				text-align: center;
				height: 3rem;
				width: 100%;
				margin-top: 0.9375rem;
			}
			#content {
				height: 11.25rem;
				width: 25rem;
				text-align: center;
				background-color: antiquewhite;
				margin: auto;
				border: 3px solid bisque;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<span id="title">密码随机生成</span>
			<input name="password" id="password" value="" />
			<button type="button" id="button" onclick="genPassword()">生成</button>
			<button type="button" id="button" onclick="copyPassword()">复制</button>
		</div>
		<script type="text/javascript">
			var password = document.getElementById("password")
			function genPassword() {
				var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
				var passwordLength = 12;
				var password = "";
				for (var i = 0; i <= passwordLength; i++) {
					var randomNumber = Math.floor(Math.random() * chars.length);
					password += chars.substring(randomNumber, randomNumber + 1);
				}
				document.getElementById("password").value = password;
			}

			function copyPassword() {
				var copyText = document.getElementById("password");
				copyText.select();
				copyText.setSelectionRange(0, 999);
				document.execCommand("copy");
			}
		</script>
	</body>
</html>