一个从txt文件获取预设查看密码的HTML代码示例-战雀笔记

一个从txt文件获取预设查看密码的HTML代码示例

<!DOCTYPE html>
<html>
<head>
<title>查看密码</title>
</head>
<body>
	<h1>查看密码</h1>
	<p>请输入密码以查看内容：</p>
	<form>
		<input type="password" name="password">
		<input type="button" value="查看" onclick="checkPassword()">
	</form>
	<div id="content" style="display:none">
		<p>这是需要密码才能查看的内容。</p>
	</div>
	<script>
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'password.txt', true);
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				var password = xhr.responseText.trim();
				document.getElementById("check-btn").addEventListener("click", function() {
					var inputPassword = document.getElementsByName("password")[0].value;
					if (inputPassword == password) {
						document.getElementById("content").style.display = "block";
					} else {
						alert("密码错误，请重新输入！");
					}
				});
			}
		};
		xhr.send();
	</script>
</body>
</html>

在这个示例中，我们使用了XMLHttpRequest对象来获取存储预设密码的txt文件。在获取到txt文件内容后，我们将其作为预设密码，并在点击“查看”按钮时进行比较。需要注意的是，我们将“查看”按钮的id设置为“check-btn”，并使用addEventListener方法来添加点击事件，以避免在获取txt文件内容之前就进行密码比较。同时，我们需要在同级目录下创建一个名为“password.txt”的文件，并将预设密码写入其中。例如，如果预设密码为“mypassword”，则在“password.txt”文件中写入“mypassword”即可。希望这个示例能够满足您的需求。