首先声明，这行代码不用于开发。
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