张家力初始化登录界面

最新推荐文章于 2024-11-08 18:54:37 发布

pythoning123

最新推荐文章于 2024-11-08 18:54:37 发布

阅读量36

点赞数

文章标签： css3 css javascript

本文链接：https://blog.csdn.net/pythoning123/article/details/133879655

版权

初始化登录界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>登录界面</title>
	<style type="text/css">
	.box {
		overflow: hidden;/* 超过box部分隐藏 */
		width: 350px;
		height: 250px;
		background-color: rgb(0 0 0 / 10%);
		box-shadow: 0 0 30px 15px rgb(0 0 0 / 15%);
		border-radius: 10px;
		display: flex;
		margin: 10% auto;
	}
	.box:hover {
		box-shadow: 0 0 30px 15px rgb(0 0 0 / 50%);
		background-color: rgb(0 0 0 / 20%);
	}
	.acc {
		width:150px;
		outline: none;/* 鼠标点击输入是发生的变化 */
		width: 80%;
		border: none;
		border-bottom: 1px solid darkviolet;
		color: black;
		background-color: rgba(0,0,0,0);
	}
	.submit {
		width: 150px;
		height: 2rem;
		color: #f6f6f6;
		background-image: linear-gradient(120deg, #e0c3fc 0%,#8ec5fc 100%);
		border: none;
		border-radius: 0.5rem;
	}
	a {
		font-size: 15px;
		margin-top: 3rem;
		padding: 1rem 2rem;
		color: #666;
		
	}
	a:hover {
		color: rgb(144,129,241);
	}
	</style>
	</head>
	<body onload="robtRand()">
	<%
	session.setAttribute("username", null);
	session.setAttribute("usertype", null);
	%>
	<div class="box">
	<form action="loginDo.jsp" method="post">
		<table align="center" style="text-align:center;">
			<tr>
				<td colspan="3"><h1 align="center">Login</h1></td>
			</tr>
			<tr>
				<td>账号:</td>
				<td><input class="acc" name="userName"></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" class="acc" name="password" id="password">
					<input type="hidden" class="acc" name="hidden" id="hidden">
				</td>
			</tr>
			<tr>
				<td>验证码</td>
				<td><input class="acc" name="userKey"></td>
				<td> <span id="passKey"  onclick="robtRand()"></span>
					<!-- <img src="yzm.jsp"  alt="验证码" 
					style="width: 110px; height: 22px; position:absolute;top:154px;"  
					οnclick="this.src='yzm.jsp? rand='+Math.random()" /> -->
					
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<input type="submit" class="submit" value="登录" onclick="md5()">
				</td>
			</tr>
			<tr>
				<td align="left">
					<a href="rige.jsp">注册账号</a>
				</td>
				<td align="right" colspan="2">
					<a href="indexf.jsp">忘记密码</a>
				</td>
			</tr>
		</table>
	</form>
	</div>
	</body>
	<script src="js/md5.js"></script> <!--οnclick="md5()" -->
	<script type="text/javascript">
		function md5() 
		{
			//alert(hex_md5(document.getElementById("password").value));
			document.getElementById("hidden").value=hex_md5(document.getElementById("password").value);
		}
		function robtRand(){
			var x = Math.round(Math.random()*9000+1000);
			document.getElementById("passKey").innerHTML=x;
			document.cookie = "robotKey=" + x;
		}	
	</script>
</html>