首先声明，这行代码不用于开发。
1、login.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
</head>
<style>
.box{
height: 30px;
width: 300px;
position: absolute;
top:50%;
margin-top: -15px;
left: 50%;
margin-left:-150px;
}
#user{
background: #ccc;
height: 20px;
}
#btn{
background: #fad0af;
border: none;
height: 20px;
}
</style>
<body>
<div class="box">
<input type="text" value="" id="user">
<input type="button" value="登陆" id="btn">
<p>密码提示：666666</p>
</div>
<script>
window.onload=function(){
var users=document.getElementById("user");
var btns=document.getElementById("btn");
btns.onclick=function(){
if(users.value == ‘‘){
alert(‘请输入密码‘);
} else if(users.value == "666666"){
window.open(‘success.html‘);
} else {
window.open("error.html");
}
}
}
</script>
</body>
</html>
2、success.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆成功了</title>
</head>
<body>
<h1>你已经登陆成功了</h1>
</body>
</html>
3、error.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>出错页面</title>
</head>
<style>
.box{
height: 250px;
width: 400px;
border: 1px solid #e0b6a3;
border-radius: 5px;
position: absolute;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -150px;
box-shadow: 2px 2px 10px #AEADAD;
}
.title{
height: 40px;
width: 400px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 20px;
float: left;
background: #f9c89b;
}
.content{
height: 210px;
width: 400px;
line-height: 210px;
text-align: center;
background: pink;
float: left;
backgroun d: #ded0b3;
}
#time{
font-size: 25px;
color: red;
font-weight: bold;
}
</style>
<body>
<div class="box">
<div class="title">亲！错了，继续来</div>
<div class="content">
<span id="time">5</span><span>s后自动返回登陆页</span>
</div>
</div>
</body>
</html>
<script>
(function(){
var times = document.getElementById("time");
var num=5;
setInterval(function(){
num--;
times.innerHTML = num;
if(num <= 0){
window.close();
}
}, 1000)
})();
</script>
4、watting
时间： 2024-10-11 19:30:33