<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function register(){
window.location.href="注册验证界面.html"}
function verify(){
var nu=document.getElementById("number").value;
var pwd=document.getElementById("pwd").value;
var span=document.getElementById("ps_span");
var reg=/^\w{3,6}$/;
if(reg.test(nu)&®.test(pwd)){
span.innerText="perfect!";
span.style.color="green";}
else{span.innerText="账号或密码输入错误!";
span.style.color="red"}
}
</script>
</head>
<style type="text/css">
input {
height: 20px;
transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border: #35a5e5 1px solid;
border-radius: 3px;
outline: none;}
table input:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);}
body{background-image: url(img/ti2g.jpg); height:100%;width:100%;
overflow: hidden; background-size:cover;
background-repeat:no-repeat;}
.bg{width: 300px; height: 250px;background: -webkit-linear-gradient(
top,white,lightblue,skyblue); border: 5px groove skyblue;
position: absolute; top:20%; left: 40%; }
#inp1,#inp2{ clear: both; width: 45px; height: 25px; margin-left: 65px; margin-top: px;}
span{font-family: simsun;font-size: 16px;}
</style>
<body>
<div class="bg" >
<center>
<h2>欢迎登录</h2>
<table >
<tr height="40px">
<td width="40px">账号</td>
<td width="80px"><input type="text" id="number"/></td>
</tr>
<tr height="40px">
<td >密码</td>
<td ><input type="text" id="pwd"/></td>
</tr>
<tr height="20px" >
<td colspan="2" align="center"><span id="ps_span"></span></td>
</tr>
</table>
<br />
</center>
<input type="button" id="inp1" value="注册" onclick="register()" />
<input type="button" id="inp2" value="登录" onclick="verify()"/>
</div>
</body>
</html>
简单登陆界面
最新推荐文章于 2022-11-21 11:21:48 发布