作业：修改JSP注册页面

表单:

userLogin.jsp:

<%-- Created by IntelliJ

IDEA. User: axe Date: 2019/9/26 Time: 15:28 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>注册</title> <style> span{ color: red; } </style> </head> <body> <form action="doUserLogin.jsp"method="post"> 账号: <input type="text"name="userName"placeholder="请输入账号"><span>*</span><br/> 密码: <input type="password"name="password"placeholder="请输入密码"><span>*</span><br/> 爱好:<br/> <input type="checkbox"name="hobby"value="游泳">游泳<br/> <input type="checkbox"name="hobby"value="下棋">下棋<br/> <input type="checkbox"name="hobby"value="看妹子">看妹子<br/> <input type="submit"value="注册"> </form> </body> </html>

页面模板：（插入表单后的）

yemian.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<script id="jqbb" src="js/jquery.min.js"></script>
<style type="text/css">
        body{
  overflow: hidden;
  margin: 0;
    background: #333;
}
h1{
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 40px;
  color: #c70012;
  padding: 0 20px;
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
      user-select:none;
}
@media (min-width:1200px){
  h1{
    font-size: 60px;
  }
}
        div{
            width: 400px;
            height: 500px;
            position: absolute;
            left: 80px;
            top: 50px;
            line-height: 30px;
        }
    div{
        margin: 300px;

        border: 1px solid white;
        height: 200px;
        height: 200px;
        background: -moz-buttonhoverface;
        text-align: center;
        /*transform:translateY(50%);!**下移元素**!*/

    }

    </style>
</head>
<body>
<div>
    <form action="doUserLogin.jsp"method="post">

        账号: <input type="text"name="userName"placeholder="请输入账号"><span>*</span><br/>
        密码: <input type="password"name="password"placeholder="请输入密码"><span>*</span><br/>
        爱好:
        <input type="checkbox"name="hobby"value="游泳">游泳
        <input type="checkbox"name="hobby"value="下棋">下棋
        <input type="checkbox"name="hobby"value="看妹子">看妹子
        <input type="submit"value="注册">
    </form>
</div>

<canvas></canvas>

</body>

<script>
        var canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d");

var ww,wh;

function onResize(){
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;
}

ctx.strokeStyle = "red";
ctx.shadowBlur = 25;
ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";

var precision = 100;
var hearts = [];
var mouseMoved = false;
function onMove(e){
  mouseMoved = true;
  if(e.type === "touchmove"){
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  }
  else{
    hearts.push(new Heart(e.clientX, e.clientY));
    hearts.push(new Heart(e.clientX, e.clientY));
  }
}

var Heart = function(x,y){
  this.x = x || Math.random()*ww;
  this.y = y || Math.random()*wh;
  this.size = Math.random()*2 + 1;
  this.shadowBlur = Math.random() * 10;
  this.speedX = (Math.random()+0.2-0.6) * 8;
  this.speedY = (Math.random()+0.2-0.6) * 8;
  this.speedSize = Math.random()*0.05 + 0.01;
  this.opacity = 1;
  this.vertices = [];
  for (var i = 0; i < precision; i++) {
    var step = (i / precision - 0.5) * (Math.PI * 2);
    var vector = {
      x : (15 * Math.pow(Math.sin(step), 3)),
      y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step)) 
    }
    this.vertices.push(vector);
  }
}

Heart.prototype.draw = function(){
  this.size -= this.speedSize;
  this.x += this.speedX;
  this.y += this.speedY;
  ctx.save();
  ctx.translate(-1000,this.y);
  ctx.scale(this.size, this.size);
  ctx.beginPath();
  for (var i = 0; i < precision; i++) {
    var vector = this.vertices[i];
    ctx.lineTo(vector.x, vector.y);
  }
  ctx.globalAlpha = this.size;
  ctx.shadowBlur = Math.round((3 - this.size) * 10);
  ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  ctx.shadowOffsetX = this.x + 1000;
  ctx.globalCompositeOperation = "screen"
  ctx.closePath();
  ctx.fill()
  ctx.restore();
};


function render(a){
  requestAnimationFrame(render);
  
  hearts.push(new Heart())
  ctx.clearRect(0,0,ww,wh);
  for (var i = 0; i < hearts.length; i++) {
    hearts[i].draw();
    if(hearts[i].size <= 0){
      hearts.splice(i,1);
      i--;
    }
  }
}



onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);
requestAnimationFrame(render);
</script>
</html>

验证操作表单：

doUserLogin.jsp:

<%--
  Created by IntelliJ IDEA.
  User: axe
  Date: 2019/9/26
  Time: 15:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>验证注册</title>
</head>
<body>

<%
    request.setCharacterEncoding("utf-8");
%>

注册成功
账号名
<%
    String name = request.getParameter("userName");
    if(name!=null&&name!=""){
        if(name.equals("admin")) {
            request.setAttribute("mess", "账号名已存在，注册失败");
            request.getRequestDispatcher("shibai.jsp").forward(request,response);
        }else{
            request.setAttribute("mess","账号名有效");
            request.getRequestDispatcher("success.jsp").forward(request,response);
        }
//        out.println(name.toSettring());
    }

%>
<br/>
密码:
<%
    String password = request.getParameter("password");
    if(password!=null){
        out.println(password);
    }
%>
<br/>
爱好
<%
    //    response.setCharacterEncoding("UTF-8");
    String []hobbys = request.getParameterValues("hobby");
    for (String hobby: hobbys){
        out.print(hobby+"<br/>");
    }
%>

</body>
</html>

success.jsp:

<%--
  Created by IntelliJ IDEA.
  User: axe
  Date: 2019/9/26
  Time: 15:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        h1{
            color: green;
        }
    </style>
</head>
<body>
<h1>注册成功</h1>
<%
    String s = (String) request.getAttribute("mess");
    out.println(s);
    Integer jishu = (Integer)application.getAttribute("jishu");
    if (jishu==null){
        application.setAttribute("jishu",1);
    }else {
        Integer i = (Integer) application.getAttribute("jishu");
        application.setAttribute("jishu",i+1);
    }
    
%>
</body>
</html>

shibai.jsp:

<%--
  Created by IntelliJ IDEA.
  User: axe
  Date: 2019/9/26
  Time: 16:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>失败</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>注册失败</h1>
<%
String s = (String) request.getAttribute("mess");
out.println(s);
%>

</body>
</html>

效果：

输入已存在的admin则:

输入符合要求的账号名:

作业：修改JSP注册页面

猜你喜欢