情人节表白超级简单计时浪漫登录小项目

最新推荐文章于 2021-06-22 08:52:41 发布

「已注销」

最新推荐文章于 2021-06-22 08:52:41 发布

阅读量265

点赞数

文章标签：表白情人节表白浪漫计时时间漂亮的登录页面

本文链接：https://blog.csdn.net/m0_51945027/article/details/113732302

版权

在这里插入图片描述

<!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 = 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);

    window.onload=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);                         // 毫秒/1000
        var day = parseInt(time/86400);                 // 天  24*60*60*1000
        var 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 = MySpring.getBean("service.LoginService");

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String sname =  req.getParameter("sname");
        String spassword = req.getParameter("spassword");
        System.out.println("控制层接收到的值"+sname+"---"+spassword);

        if (loginService.loginByNameAndPass(sname, spassword) != null ) {
            System.out.println("控制层登录成功了");
            req.getRequestDispatcher("/success.html").forward(req, resp);
        } else {
            System.out.println("控制层登录失败了");
            req.getRequestDispatcher("/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 = MySpring.getBean("service.RegisterService");

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String sname = req.getParameter("sname");
        String spassword = req.getParameter("spassword");
        registerService.register(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 = "com.mysql.cj.jdbc.Driver";
    //com.mysql.cj.jdbc.Driver
    String 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 = DriverManager.getConnection(url,user,password);
            preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setString(1,sname);
            preparedStatement.setString(2,spassword);


            resultSet = preparedStatement.executeQuery();
            if (resultSet.next()) {
                student = new Student();
                student.setSname(resultSet.getString("sname"));
                student.setSpassword(resultSet.getString("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 = "com.mysql.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 = DriverManager.getConnection(url, user, password);
            PreparedStatement preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setString(1, sname);
            preparedStatement.setString(2, spassword);
            preparedStatement.executeUpdate();

            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;
    }

    @Override
    public 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 = MySpring.getBean("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 = MySpring.getBean("dao.RegisterDao");
    public void register(String sname, String spassword) {
        registerDao.register(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) map.get(className);
        if (object == null) {

            try {
                Class clazz = Class.forName(className);
                object = (T)clazz.newInstance();
                map.put(className, object);


            } catch (ClassNotFoundException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            } catch (InstantiationException e) {
                e.printStackTrace();
            }
        }

        return object;
    }
}