<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>我爱你</title></head><body>哈哈哈<br>老婆<br>是不是感觉页面好丑啊<br>哈哈哈哈<br>没办法<br>前端是真不会啊<a href="login.html" >登陆</a><a href="register.html">注册</a></body>
</html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>我爱你</title>
</head><body>
<section><!-- 背景颜色 --><div class="color"></div><div class="color"></div><div class="color"></div><div class="box"><!-- 背景圆 --><div class="circle" style="--x:0"></div><div class="circle" style="--x:1"></div><div class="circle" style="--x:2"></div><div class="circle" style="--x:3"></div><div class="circle" style="--x:4"></div><!-- 登录框 --><div class="container"><div class="form"><h2>登录</h2><form action="login" method="post" ><div class="inputBox"><input type="text" name="sname" placeholder="姓名"></div><div class="inputBox"><input type="password" name="spassword" placeholder="密码"></div><div class="inputBox"><input type="submit" value="登录"></div><p class="forget">忘记密码?<a href="#">点击这里</a></p><p class="forget">没有账户?<a href="#">注册</a></p></form></div></div></div>
</section>
</body></html>
/* 清除浏览器默认边距,
使边框和内边距的值包含在元素的width和height内 */* {margin: 0;padding: 0;box-sizing: border-box;
}/* 使用flex布局,让内容垂直和水平居中 */section {/* 相对定位 */position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center;min-height: 100vh;/* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}/* 背景颜色 */section .color {/* 绝对定位 */position: absolute;/* 使用filter(滤镜) 属性,给图像设置高斯模糊*/filter: blur(200px);
}/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */section .color:nth-child(1) {top: -350px;width: 600px;height: 600px;background: #ff359b;
}section .color:nth-child(2) {bottom: -150px;left: 100px;width: 500px;height: 500px;background: #fffd87;
}section .color:nth-child(3) {bottom: 50px;right: 100px;width: 500px;height: 500px;background: #00d2ff;
}.box {position: relative;
}/* 背景圆样式 */.box .circle {position: absolute;background: rgba(255, 255, 255, 0.1);/* backdrop-filter属性为一个元素后面区域添加模糊效果 */backdrop-filter: blur(5px);box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);border-radius: 50%;/* 使用filter(滤镜) 属性,改变颜色。hue-rotate(deg) 给图像应用色相旋转calc() 函数用于动态计算长度值var() 函数调用自定义的CSS属性值x*/filter: hue-rotate(calc(var(--x) * 70deg));/* 调用动画animate,需要10s完成动画,linear表示动画从头到尾的速度是相同的,infinite指定动画应该循环播放无限次*/animation: animate 10s linear infinite;/* 动态计算动画延迟几秒播放 */animation-delay: calc(var(--x) * -1s);
}/* 背景圆动画 */@keyframes animate {0%, 100% {transform: translateY(-50px);}50% {transform: translateY(50px);}
}.box .circle:nth-child(1) {top: -50px;right: -60px;width: 100px;height: 100px;
}.box .circle:nth-child(2) {top: 150px;left: -100px;width: 120px;height: 120px;z-index: 2;
}.box .circle:nth-child(3) {bottom: 50px;right: -60px;width: 80px;height: 80px;z-index: 2;
}.box .circle:nth-child(4) {bottom: -80px;left: 100px;width: 60px;height: 60px;
}.box .circle:nth-child(5) {top: -80px;left: 140px;width: 60px;height: 60px;
}/* 登录框样式 */.container {position: relative;width: 400px;min-height: 400px;background: rgba(255, 255, 255, 0.1);display: flex;justify-content: center;align-items: center;backdrop-filter: blur(5px);box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}.form {position: relative;width: 100%;height: 100%;padding: 50px;
}/* 登录标题样式 */.form h2 {position: relative;color: #fff;font-size: 24px;font-weight: 600;letter-spacing: 5px;margin-bottom: 30px;cursor: pointer;
}/* 登录标题的下划线样式 */.form h2::before {content: "";position: absolute;left: 0;bottom: -10px;width: 0px;height: 3px;background: #fff;transition: 0.5s;
}.form h2:hover:before {width: 53px;
}.form .inputBox {width: 100%;margin-top: 20px;
}/* 输入框样式 */.form .inputBox input {width: 100%;padding: 10px 20px;background: rgba(255, 255, 255, 0.2);outline: none;border: none;border-radius: 30px;border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);font-size: 16px;letter-spacing: 1px;color: #fff;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}.form .inputBox input::placeholder {color: #fff;
}/* 登录按钮样式 */.form .inputBox input[type="submit"] {background: #fff;color: #666;max-width: 100px;margin-bottom: 20px;font-weight: 600;cursor: pointer;
}.forget {margin-top: 6px;color: #fff;letter-spacing: 1px;
}.forget a {color: #fff;font-weight: 600;text-decoration: none;
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"></head><body><form action="register" method="post">账号<input type="text" name="sname" value=""><br>密码<input type="password" name="spassword" value=""><input type="submit" value="注册"></form></body>
</html>
<!doctype html>
<html>
<head><meta charset="utf-8"><title>i love u forever</title><link href="favicon.ico" rel="shortcut icon" /><style>body{overflow: hidden;margin: 0;}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;}h1 span{font-size:20px;}</style></head>
<body>
<h1 id="h1"></h1>
<canvas></canvas><script>var canvas = document.querySelector("canvas"),ctx = Context("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;pe === "touchmove"){hearts.push(new uches[0].clientX, e.touches[0].clientY));hearts.push(new uches[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 * s(step) - 5 * s(2 * step) - 2 * s(3 * step) - s(4 * step))}this.vertices.push(vector);}}Heart.prototype.draw = function(){this.size -= this.speedSize;this.x += this.speedX;this.y += this.speedY;ctx.save();anslate(-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 = und((3 - this.size) * 10);ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";ctx.shadowOffsetX = this.x + 1000;ctx.globalCompositeOperation = "screen"ctx.closePath();ctx.fill()store();};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);load=function starttime(){time(h1,'2021/1/24'); // 在一起的时间ptimer = setTimeout(starttime,1000); // 添加计时器}function time(obj,futimg){var nowtime = new Date().getTime(); // 现在时间转换为时间戳var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳var msec = nowtime-futruetime; // 毫秒 未来时间-现在时间var time = (msec/1000); // 毫秒/1000var day = parseInt(time/86400); // 天 24*60*60*1000var hour = parseInt(time/3600)-24*day; // 小时 60*60 总小时数-过去的小时数=现在的小时数var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数var second = parseInt(time%60); // 以60秒为一整份 取余 剩下秒数
// console.log(hour+":"+minute+":"+second)
// alert(hour)obj.innerHTML="亲爱的<br>咱俩在一起的时间已经:<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了<br><span>一时间不知道从哪说起,真爱来了,我们要好好把握。<br>不管面临多大的压力,不管前面的路如何崎岖.<br>不管经历过什么,我仍坚信最浪漫的事就是和你一起慢慢变老.<br>相信中间的计时器,将永远继续下去,直至数据溢出.</span>"return true;}
</script></body>
</html>
package controller;import service.LoginService;
import util.MySpring;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class LoginController extends HttpServlet {LoginService loginService = Bean("service.LoginService");@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");String sname = Parameter("sname");String spassword = Parameter("spassword");System.out.println("控制层接收到的值"+sname+"---"+spassword);if (loginService.loginByNameAndPass(sname, spassword) != null ) {System.out.println("控制层登录成功了");RequestDispatcher("/success.html").forward(req, resp);} else {System.out.println("控制层登录失败了");RequestDispatcher("/login.html").forward(req,resp);}}
}
package controller;import service.RegisterService;
import util.MySpring;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class RegisterController extends HttpServlet {RegisterService registerService = Bean("service.RegisterService");@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");String sname = Parameter("sname");String spassword = Parameter("spassword");ister(sname,spassword);}
}
package dao;import domain.Student;import java.sql.*;public class LoginDao {// public static void main(String[] args) {
// LoginDao loginDao = new LoginDao();
// loginDao.login("老婆","1");
// }String className = sql.cj.jdbc.Driver";//sql.cj.jdbc.DriverString url = "jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT&useSSL=false";String user = "root";String password = "burst970919";Connection connection = null;PreparedStatement preparedStatement = null;ResultSet resultSet = null;public Student login(String sname, String spassword) {Student student = null;System.out.println("dao层接受到参数"+sname+"---"+spassword);String sql = "select * from student where sname = ? and spassword = ?";try {Class.forName(className);connection = Connection(url,user,password);preparedStatement = connection.prepareStatement(sql);preparedStatement.setString(1,sname);preparedStatement.setString(2,spassword);resultSet = uteQuery();if (()) {student = new Student();student.String("sname"));student.String("spassword"));}} catch (ClassNotFoundException e) {e.printStackTrace();} catch (SQLException throwables) {throwables.printStackTrace();}finally {if (resultSet != null) {try {resultSet.close();} catch (SQLException throwables) {throwables.printStackTrace();}}if (preparedStatement != null) {try {preparedStatement.close();} catch (SQLException throwables) {throwables.printStackTrace();}}if (connection != null) {try {connection.close();} catch (SQLException throwables) {throwables.printStackTrace();}}}System.out.println("dao层输出的student对象"+student);return student;}
}
package dao;import domain.Student;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;public class RegisterDao {public void register(String sname, String spassword) {Student student = null;String className = sql.cj.jdbc.Driver";String url = "jdbc:mysql://localhost:3306/student";String user = "root";String password = "burst970919";String sql = "insert into student(sname,spassword) values (?,?)";try {Class.forName(className);Connection connection = Connection(url, user, password);PreparedStatement preparedStatement = connection.prepareStatement(sql);preparedStatement.setString(1, sname);preparedStatement.setString(2, spassword);uteUpdate();preparedStatement.close();connection.close();} catch (ClassNotFoundException e) {e.printStackTrace();} catch (SQLException throwables) {throwables.printStackTrace();}}}
package domain;public class Student {Integer sno ;String sname;String spassword;public Student() {}public Student(Integer sno, String sname, String spassword) {this.sno = sno;this.sname = sname;this.spassword = spassword;}public Integer getSno() {return sno;}public void setSno(Integer sno) {this.sno = sno;}public String getSname() {return sname;}public void setSname(String sname) {this.sname = sname;}public String getSpassword() {return spassword;}public void setSpassword(String spassword) {this.spassword = spassword;}@Overridepublic String toString() {return "Student{" +"sno=" + sno +", sname='" + sname + ''' +", spassword='" + spassword + ''' +'}';}
}
package service;import dao.LoginDao;
import domain.Student;
import util.MySpring;public class LoginService {LoginDao loginDao = Bean("dao.LoginDao");public Student loginByNameAndPass(String sname, String spassword) {System.out.println("------service层接受的参数----"+sname+"---"+spassword);return loginDao.login(sname, spassword);
//
// String result = null;
//
// if (loginDao.login(sname, spassword) != null) {
// System.out.println("service层的判断");
// result = "登录成功";
// }
//
// System.out.println("service层输出"+result);
// return result;}//
// public static void main(String[] args) {
// LoginService loginService = new LoginService();
// loginService.loginByNameAndPass("老婆","123");
// }
}
package service;import dao.RegisterDao;
import util.MySpring;public class RegisterService {RegisterDao registerDao = Bean("dao.RegisterDao");public void register(String sname, String spassword) {ister(sname,spassword);}
}
package util;import java.util.HashMap;
import java.util.Map;public class MySpring {private static Map<String, Object> map = new HashMap<String, Object>();public static <T> T getBean(String className) {T object = (T) (className);if (object == null) {try {Class clazz = Class.forName(className);object = (wInstance();map.put(className, object);} catch (ClassNotFoundException e) {e.printStackTrace();} catch (IllegalAccessException e) {e.printStackTrace();} catch (InstantiationException e) {e.printStackTrace();}}return object;}
}
本文发布于:2024-02-01 10:27:58,感谢您对本站的认可!
本文链接:https://www.4u4v.net/it/170675447835980.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |