我正在制作一个有趣的网站,我想在其中放一个小复活节彩蛋,您可以在其中输入密码以查看网站上的隐藏页面。
我知道如何使用html制作登录表单,并且我获得了用于输入密码的"input"标签,但我不确定"输出"应该是什么..?我还希望它仅在输入正确的文本时才显示div 或 span。
如果我能同时要求用户名和密码来匹配,那就太酷了,但我不知道它是如何工作的。
function check_password (input_element) {
//get value of input
var password = input_element.value;
//check value and show/hide the div
if (password == 'secret')
document.getElementById ('hidden_div').style.display = 'block';
else
document.getElementById ('hidden_div').style.display = 'none';
}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>
好吧,你需要javascript,只需要一个简单的onclicklistener。
例如:
<button onclick="checkHidden()">Login</button>
<script>
function checkHidden()
{
if(document.getElementById("name").value == "Name" && document.getElementById("pw") == "123")
{
window.location.href = "andereSeite.html";
}
}
</script>
但显然每个人都可以看到用户名和密码。他们只需要让他们显示来源。如果你想秘密使用它,你需要使用 PHP :)有很多关于表单+ PHP的教程。
好吧,这里有一个简单的例子。使用 onkeyup=" 属性在每个输入的字符之后运行 javascript 函数check_password(this)
(这是指输入标签(。如果密码正确,div 将显示:block/none;。
function check_password (input_element) {
//get value of input
var password = input_element.value;
//check value and show/hide the div
if (password == 'secret')
document.getElementById ('hidden_div').style.display = 'block';
else
document.getElementById ('hidden_div').style.display = 'none';
}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>