【练习】jsp登录

          1 <%--
          2   Created by IntelliJ IDEA.
          3   User: L
          4   Date: 2019/9/27
          5   Time: 10:32
          6   To change this template use File | Settings | File Templates.
          7 --%>
          8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
          9 <html>
         10 <head>
         11     <meta charset="utf-8">
         12     <script id="jqbb" src="js/jquery.min.js"></script>
         13     <style type="text/css">
         14         body{
         15             overflow: hidden;
         16             margin: 0;
         17             background: #333;
         18         }
         19         h1{
         20             position: fixed;
         21             top: 50%;
         22             left: 0;
         23             width: 118%;
         24             text-align: center;
         25             transform:translateY(-50%);
         26             font-family: ‘Love Ya Like A Sister‘, cursive;
         27             font-size: 40px;
         28             color: #c70012;
         29             padding: 0 20px;
         30             -moz-user-select:none;/*火狐*/
         31             -webkit-user-select:none;/*webkit浏览器*/
         32             -ms-user-select:none;/*IE10*/
         33             -khtml-user-select:none;/*早期浏览器*/
         34             user-select:none;
         35         }
         36         @media (min-width:1200px){
         37             h1{
         38                 font-size: 60px;
         39             }
         40         }
         41         .login{
         42             height: 250px;
         43             width: 400px;
         44             border:1px solid #ccc;
         45             position: absolute;
         46             left: 50%;
         47             top: 50%;
         48             margin-left: -200px;
         49             margin-top: -125px;
         50         }
         51         form{
         52             color: #fff;
         53             margin-left: 15%;
         54             margin-top: 35px;
         55         }
         56         table{
         57             color: #fff;
         58         }
         59         .dl:hover{
         60             background-color: burlywood;
         61         }
         62         .cz:hover{
         63             background-color: burlywood;
         64         }
         65     </style>
         66 
         67 
         68 </head>
         69 <body>
         70 
         71 <div class="login">
         72     <p style="font-size: 20px;text-align: center;color:sandybrown">欢迎使用登录系统</p>
         73 
         74     <%--        获取网页的cookie,判断是否有需要的登录名信息,有则显示在用户名框内--%>
         75     <%
         76         String userName = "";
         77         Cookie[] cookie = request.getCookies();
         78         if(cookie == null || cookie.length == 0){
         79         }else {
         80             for (Cookie cookie1 : cookie) {
         81                 if (cookie1.getName().equals("userName")){
         82                     userName = cookie1.getValue();
         83 
         84                     //out.print(userName);
         85                 }
         86                 //out.print(cookie1.getName()+"--");
         87             }
         88         }
         89     %>
         90     <form action="go.jsp" name="Myfeg" onsubmit="return checkReg()" method="get">
         91         <table cellpadding="10">
         92             <tr>
         93                 <td> 用户名:</td>
         94                 <td><input type="text" name="userName" placeholder="用户名为4-16个字符" value="<%=userName%>"/></td>
         95             </tr>
         96             <tr>
         97                 <td> 密&nbsp;&nbsp;&nbsp;码:</td>
         98                 <td> <input type="password" name="userPwd" placeholder="密码由数字字符6~18位"></td>
         99             </tr>
        100             <tr>
        101                 <td>
        102 
        103                 </td>
        104 
        105                 <td>
        106                     <input class="dl" type="submit" name="dl" value="登录" style="margin-left: 10px;border:none">
        107                     <input class="cz" type="button" name="cz" value="注册" style="margin-left: 40px;border:none">
        108                 </td>
        109             </tr>
        110         </table>
        111     </form>
        112     <%--      获取地址栏的属性值以及application记录页面访问次数--%>
        113     <%
        114         String mess = request.getParameter("info");
        115         if (mess != null ){
        116             out.print(mess);
        117         }
        118         Object count = application.getAttribute("count");
        119         if(count == null){
        120             //application中未存放count
        121             application.setAttribute("count", 1);
        122         }else{
        123             //application中已经存放count
        124             Integer i=(Integer)count;
        125             application.setAttribute("count", i+1);
        126         }
        127         Integer icount=(Integer)application.getAttribute("count");
        128         out.println("页面被访问了"+icount+"次");
        129     %>
        130     <%--      登录失败后,返回主页面,修改地址栏参数,刷新之后不会显示登录失败提示--%>
        131     <script>
        132         var url = document.URL;
        133         var num = url.indexOf(‘?‘);
        134         if (num){
        135             URL = url.substring(0,num);  //截取网址信息
        136             history.pushState(null,null,URL);  //将网址设置
        137         }
        138     </script>
        139 
        140 </div>
        141 <canvas>
        142 
        143 </canvas>
        144 </body>
        145 <script>
        146     // 判断会员姓名是否合法
        147     function checkName(){
        148         // var name=document.Myfeg.userName.value;
        149         var name= document.getElementsByClassName("userName");
        150         // var p=/^\w{3,16}$/;
        151         if(name==""){
        152             alert("用户不能为空");
        153             return false;
        154         }
        155         // if(!p.test(name)){
        156         //   alert("用户名为4-16个字符,可以包含字母数字下划线!");
        157         //   return false;
        158         // }
        159         return true;
        160     }
        161     // 判断密码
        162     function checkPwd(){
        163         var pwd=document.Myfeg.userPwd.value;
        164         var c=/^\w{3,12}$/;
        165         if(pwd==""){
        166             alert("请输入正确的用户名");
        167             return false;
        168         }
        169         if(!c.test(pwd)){
        170             alert("密码为4-16个字符,可以包含字母数字下划线!");
        171             return false;
        172         }
        173         return true;
        174 
        175     }
        176     // 验证提交
        177     function checkReg(){
        178         if(checkName()&&checkPwd()){
        179             return true;
        180         }else{
        181             return false;
        182         }
        183     }
        184 
        185     var canvas = document.querySelector("canvas"),
        186         ctx = canvas.getContext("2d");
        187 
        188     var ww,wh;
        189 
        190     function onResize(){
        191         ww = canvas.width = window.innerWidth;
        192         wh = canvas.height = window.innerHeight;
        193     }
        194 
        195     ctx.strokeStyle = "red";
        196     ctx.shadowBlur = 25;
        197     ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
        198 
        199     var precision = 100;
        200     var hearts = [];
        201     var mouseMoved = false;
        202     function onMove(e){
        203         mouseMoved = true;
        204         if(e.type === "touchmove"){
        205             hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
        206             hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
        207         }
        208         else{
        209             hearts.push(new Heart(e.clientX, e.clientY));
        210             hearts.push(new Heart(e.clientX, e.clientY));
        211         }
        212     }
        213 
        214     var Heart = function(x,y){
        215         this.x = x || Math.random()*ww;
        216         this.y = y || Math.random()*wh;
        217         this.size = Math.random()*2 + 1;
        218         this.shadowBlur = Math.random() * 10;
        219         this.speedX = (Math.random()+0.2-0.6) * 8;
        220         this.speedY = (Math.random()+0.2-0.6) * 8;
        221         this.speedSize = Math.random()*0.05 + 0.01;
        222         this.opacity = 1;
        223         this.vertices = [];
        224         for (var i = 0; i < precision; i++) {
        225             var step = (i / precision - 0.5) * (Math.PI * 2);
        226             var vector = {
        227                 x : (15 * Math.pow(Math.sin(step), 3)),
        228                 y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
        229             }
        230             this.vertices.push(vector);
        231         }
        232     }
        233 
        234     Heart.prototype.draw = function(){
        235         this.size -= this.speedSize;
        236         this.x += this.speedX;
        237         this.y += this.speedY;
        238         ctx.save();
        239         ctx.translate(-1000,this.y);
        240         ctx.scale(this.size, this.size);
        241         ctx.beginPath();
        242         for (var i = 0; i < precision; i++) {
        243             var vector = this.vertices[i];
        244             ctx.lineTo(vector.x, vector.y);
        245         }
        246         ctx.globalAlpha = this.size;
        247         ctx.shadowBlur = Math.round((3 - this.size) * 10);
        248         ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
        249         ctx.shadowOffsetX = this.x + 1000;
        250         ctx.globalCompositeOperation = "screen"
        251         ctx.closePath();
        252         ctx.fill()
        253         ctx.restore();
        254     };
        255 
        256     function render(a){
        257         requestAnimationFrame(render);
        258 
        259         hearts.push(new Heart())
        260         ctx.clearRect(0,0,ww,wh);
        261         for (var i = 0; i < hearts.length; i++) {
        262             hearts[i].draw();
        263             if(hearts[i].size <= 0){
        264                 hearts.splice(i,1);
        265                 i--;
        266             }
        267         }
        268     }
        269     onResize();
        270     window.addEventListener("mousemove", onMove);
        271     window.addEventListener("touchmove", onMove);
        272     window.addEventListener("resize", onResize);
        273     requestAnimationFrame(render);
        274 </script>
        275 </html>
        <%@ page import="java.net.URLEncoder" %><%--
          Created by IntelliJ IDEA.
          User: L
          Date: 2019/9/27
          Time: 10:32
          To change this template use File | Settings | File Templates.
        --%>
        <%@ page contentType="text/html;charset=UTF-8" language="java" %>
        <html>
        <head>
            <title>Title</title>
        </head>
        <body>
        <%
            String userName = request.getParameter("userName");
            String userPwd = request.getParameter("userPwd");
            if (userName.equals("admin") && userPwd.equals("1234567")){
                //登录成功
                session.setAttribute("userName",userName);
                Cookie cookie = new Cookie("userName",userName);
                cookie.setPath("/");
                response.addCookie(cookie);
                request.getRequestDispatcher("success.jsp").forward(request,response);
            }else{
                //登录失败,使用重定向回到登录界面,为地址栏添加一个属性,提示登录失败
                String info = "登录失败!";
                info = URLEncoder.encode(info,"utf-8");
                response.sendRedirect("index.jsp?info="+info);
                //request.getRequestDispatcher("index.jsp").forward(request,response);
            }
        %>
        </body>
        </html>
        <%--
          Created by IntelliJ IDEA.
          User: L
          Date: 2019/9/27
          Time: 10:32
          To change this template use File | Settings | File Templates.
        --%>
        <%@ page contentType="text/html;charset=UTF-8" language="java" %>
        <html>
        <head>
            <title>登录成功</title>
        </head>
        <body>
        <%
            String userName = (String) session.getAttribute("userName");
            if(userName == null || userName == ""){
                response.sendRedirect("index.jsp");
            }else {%>
        <h1><%out.print(session.getAttribute("userName"));%>,登录成功!</h1>
        <%}%>
        <button type="button" onclick="javascript:location.href=‘index.jsp‘">注销</button>
        </body>
        </html>

         分享图片

         

        分享图片

         

         

         分享图片

        相关文章
        相关标签/搜索
        管家婆精选心水黄大仙