login.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <% int random; %>
4 <% String code; %>
5 <%! int forsize; %>
6 <!-- 导航栏数组 -->
7 <%! String arr[]={"主页","风","花","雪","月"};%>
8 <%! String brr[]={"main","wind","flower","snow","moon"};%>
9 <% random=(int)Math.floor(Math.random()*9000+1000);%>
10 <!DOCTYPE html>
11 <html>
12 <head>
13 <meta charset="UTF-8">
14 <title>欢迎登录我的家园</title>
15 <link rel="stylesheet" type="text/css" href="login.css">
16 </head>
17 <body>
18 <!-- 导航 -->
19 <ul>
20 <%for(forsize = 0;forsize <=4;forsize++){%>
21 <% String text=arr[forsize]; %>
22 <% String textb=brr[forsize]; %>
23 <li><a href="#<%= textb%>"><%= text%></a></li><%
24 }%>
25 <li style="float:right"><a class="active" href="#help">帮助</a></li>
26 </ul>
27 <!-- 主界面 -->
28 <!-- 登陆表单 -->
29 <div class="weizhi">
30 <form action="onlogin.jsp" method="post" class="form" onSubmit="return upcode()">
31 <!-- return 函数获得返回值判断是否跳转 -->
32 <table>
33 <tr>
34 <td>用户名：</td>
35 <!--οninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 输入时判断是否为中文，英文，数字 onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,''))"粘贴时判断 -->
36 <td><input type="text" name="username" id="username" οninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,''))"></td>
37 </tr>
38 <tr>
39 <td>密   码：</td>
40 <!-- 只能输入是否为英文，数字 -->
41 <td><input type="password" name="password" id="password" οninput="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-\z\A-\Z0-9]/g,''))"/></td>
42 </tr>
43 <tr>
44 <td>输入验证码：</td>
45 <!--οninput="value=value.replace(/[^\d]/g,'')" 输入时判断是否为数字 onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"粘贴时判断 -->
46 <td><input type="text" name="yanzheng" id="yanzheng" οninput="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/></td>
47 </tr>
48 <tr>
49 <td><input type="button" name="send" value="验证码："/></td>
50 <td><input type="text" name="code" id="code" value="<%=random %>" readonly="readonly"/></td>
51 </tr>
52 <p class="up"><input type="submit" name="up" value="提交"/></p>
53 </table>
54 </form>
55 </div>
56 <!-- 底部栏 -->
57 </body>
58 <!-- 判断验证码是否正确 -->
59 <script>
60 function upcode(){
61 var a = document.getElementById("yanzheng");//获取用户输入的验证码
62 var b = document.getElementById("code");//获取系统生成的验证码
63 var u = document.getElementById("username");
64 var p = document.getElementById("password");
65 if(parseInt(a.value)==parseInt(b.value)&&u.value=="zs"&&p.value=="123"){
66 alert("验证通过！");
67 return true;
68 }else{
69 alert("验证未通过！");
70 return false;
71 }
72 }
73 </script>
74 <%
75 session.setAttribute("rand", random);
76 %>
77 </html>
login.css
1 @charset "UTF-8";
2 body {
3 margin:0;
4 height:1080;
5 width:1920;
6 background-image:url(beijing.png);
7 background-repeat:no-repeat;
8 }
9
10 ul {
11 list-style-type: none;
12 margin: 0;
13 padding: 0;
14 overflow: hidden;
15 background-color: #333;
16 position: fixed;
17 top: 0;
18 width: 100%;
19 }
20
21 li {
22 float: left;
23 }
24
25 li a {
26 display: block;
27 color: white;
28 text-align: center;
29 padding: 14px 16px;
30 text-decoration: none;
31 }
32
33 li a:hover:not(.active) {
34 background-color: #111;
35 }
36
37 p {
38 text-align:center;
39 }
40
41
42 .active {
43 background-color: #4CAF50;
44 }
45
46 .form {
47 width:350px;
48 height:200px;
49 background-color:rgba(1,0,1,0.5);
50 }
51
52 .weizhi {
53 position:relative;
54 top:200px;
55 left:610px;
56 }
57 .up {
58 position: relative;
59 top:150px;
60 }
onlogin.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <%
4 int random = (int)session.getAttribute("rand");
5 String name = request.getParameter("username");
6 %>
7 <!DOCTYPE html>
8 <html>
9 <head>
10 <meta charset="UTF-8">
11 <title>登陆成功</title>
12 </head>
13 <body>
14 <ul>
15 <li>
16 <p>
17 <b>用户名:</b>
18 <%=name%>
19 </p>
20 </li>
21 </ul>
22 </body>
23 </html>