亲爱的C知道,你能否用HTML做一个一进入就弹出需要输入正确密码的输入框,再搞一个判断,如密码输入的是123456789就显示额啥玩意,如果密码是xWvKlV297u就显示啊对对对i请设计的好看点
时间: 2023-06-18 07:05:57 浏览: 181
密码显示器(可以对密码输入框进行密码显示!)
3星 · 编辑精心推荐
当然可以,请看下面的代码,我用HTML和JavaScript实现了你所需的功能,密码分别为123456789和xWvKlV297u:
```html
<!DOCTYPE html>
<html>
<head>
<title>Password Prompt</title>
<meta charset="UTF-8">
<style>
/* 弹出框样式 */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
/* 弹出框内容样式 */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 30%;
text-align: center;
border-radius: 8px;
}
/* 密码输入框样式 */
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
/* 确认按钮样式 */
.confirm-button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
/* 错误提示样式 */
.error-message {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<div id="myModal" class="modal">
<div class="modal-content">
<h2>Please enter password:</h2>
<input type="password" id="password">
<button class="confirm-button" onclick="checkPassword()">Confirm</button>
<p id="error-message" class="error-message"></p>
</div>
</div>
<script>
// 获取弹出框
var modal = document.getElementById("myModal");
// 当页面加载完后弹出框自动弹出
window.onload = function() {
modal.style.display = "block";
}
// 检查密码是否正确
function checkPassword() {
var password = document.getElementById("password").value;
var errorMessage = document.getElementById("error-message");
if (password === "123456789") {
// 如果密码为123456789,则显示提示信息1
errorMessage.innerHTML = "";
modal.style.display = "none";
document.write("<h1 style='text-align:center;margin-top:50px;'>额啥玩意1</h1>");
} else if (password === "xWvKlV297u") {
// 如果密码为xWvKlV297u,则显示提示信息2
errorMessage.innerHTML = "";
modal.style.display = "none";
document.write("<h1 style='text-align:center;margin-top:50px;'>啊对对对i</h1>");
} else {
// 如果密码不正确,则显示错误提示信息
errorMessage.innerHTML = "Incorrect password!";
}
}
</script>
</body>
</html>
```
你可以将上面的代码复制到一个HTML文件中打开看看效果,弹出框中输入不同的密码,会显示不同的提示信息。
阅读全文