简单登陆界面

最新推荐文章于 2022-11-21 11:21:48 发布

浪荡之徒

最新推荐文章于 2022-11-21 11:21:48 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/Chujianlong321/article/details/90605168

版权

<!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)&&reg.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>

用户登陆界面

浪荡之徒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单登陆界面

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function register(){ window.location.href="...
复制链接

扫一扫