修改次数: 4 | 最后修改时间: 2024年9月11日, 2:43 下午 | 总发布文章数: 130 | 文章修改后的访问量: 375 次阅读
用户需要输入正确的密码才能继续查看内容。
密码保护代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密码保护内容</title>
<style>
#protectedContent {
display: none;
}
#passwordInput {
text-align: center;
margin-top: 50px;
}
.error {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="passwordInput">
<h2>请输入密码以查看内容</h2>
<input type="password" id="password" placeholder="输入密码">
<button onclick="checkPassword()">提交</button>
<p class="error" id="errorMessage"></p>
</div>
<div id="protectedContent">
<h2>受保护的内容</h2>
<p>这是一些受密码保护的内容。</p>
<!-- 你的网页内容 -->
</div>
<script>
function checkPassword() {
const correctPassword = "123456"; // 设置正确的密码
const userPassword = document.getElementById('password').value;
const errorMessage = document.getElementById('errorMessage');
if (userPassword === correctPassword) {
document.getElementById('passwordInput').style.display = 'none';
document.getElementById('protectedContent').style.display = 'block';
} else {
errorMessage.textContent = "密码错误，请重试。";
}
}
</script>
</body>
</html>
请输入密码以查看内容
我跟傻宝相识的日子是什么时候？
代码说明：
1.初始状态：页面加载时，只显示输入密码的部分（passwordInput），受保护的内容（protectedContent）是隐藏的。
2.输入密码：用户在输入框中输入密码，然后点击“提交”按钮。
3.密码验证：使用JavaScript函数checkPassword()来检查用户输入的密码是否正确。如果密码正确，隐藏密码输入部分并显示受保护的内容；如果密码错误，显示错误消息。
4.自定义密码：你可以修改代码中的correctPassword变量来设置你想要的密码。
使用场景：
将这段代码插入到你的网页中，可以用来保护一些敏感内容，要求用户在输入正确密码后才能查看。如果你需要更高级的密码保护功能，可能需要借助服务器端语言如PHP或后台数据库来管理用户的登录和权限。
Smile微笑: :) 🙂
Biggrin: :D 😀
Sad: :( 🙁
哇呜： 8O 😯
哼： :? 😕
生气气： :x 😡凶凶哟
Em... :| 😐
眨眼 ;) 😉
LOL笑尿了 :lol: 😆
羞羞 :oops: 😳
哭哭委屈： :cry: 😥
邪恶： :evil: 👿
翻白眼 :roll: 🙄
好主意 :idea: 💡🙁 😯 😕 😡 😐 😉 😆 😳 😥 👿 😈 🙄 ❗ ❓ 💡 ➡ 
查看: 更多关于表情包的故事
哈哈此处为评论表情库….自取哈 😉