教务管理系统页面设计与JavaScript交互实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_72632154/article/details/137145381

一、页面展示

动画效果：

当鼠标指针移动到某一功能上时，会发生变化。

当鼠标点击功能时，会发生变化。

功能展示：

点击成功后，进入登录或注册页面。

二、源代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>教务管理系统页面</title>
    <script src="/js/教务系统管理页面.js"></script>
    <link rel="stylesheet" href="/css/教务管理系统页面.css">
</head>  
<body>
    <div class="fatherBox">
        <h1 class="title">教务管理系统</h1>
        <pre class="theMe">你好，欢迎使用教务管理系统
            请选项功能</pre>
        <p class="time">当前时间：<span id="time"></span></p>  
        <div class="farBox"><hr>
            <div class="closeBox">
                <div class="box" id="">
                    <a href="/01.HTML/08.第一周作业/用户注册页面.html" target="_blank"><img src="/image/图标/运行调试程序.svg" alt="登录"></a><br>
                    <p>用户登录</p>
                </div>
                <div class="box">
                    <a href="/01.HTML/08.第一周作业/用户注册页面.html" target="_blank"><img src="/image/图标/菜单.svg" alt=""></a><br>
                    <p>用户注册</p>
                </div>
                <div class="box">
                    <a href="/01.HTML/08.第一周作业/用户注册页面.html" target="_blank"><img src="/image/图标/安卓系统.svg" alt=""></a><br>
                    <p>信息管理</p>
                </div>
                <div class="box">
                    <a href="/01.HTML/08.第一周作业/用户注册页面.html" target="_blank"><img src="/image/图标/文件新建文档.svg" alt=""></a><br>
                    <p>退出登录</p>
                </div>
            </div>
        </div>
    </div>  
</body>  
</html>

        html, body {
            margin: 0;  
            padding: 0;  
            height: 100%; 
        }  
        .fatherBox {  
            position:fixed;
            width: 100%;  
            height: 100%;  
            background-image: url("https://img-baofun.zhhainiao.com/fs/9bba04398db5b4d8ad93aaa05a220ec3.jpg");  
            background-size: cover;  
            background-position: center; /* 让图片居中显示 */  
            background-repeat: repeat; /* 图片不重复 */  
            /* background-attachment: scroll; */
        }
        .farBox{
            /* background-color: yellow; */
            position: absolute;
            width: 600px;
            height: 400px;
            border-color: red;
            margin: auto;
            margin-top: 0px;
            top: 400px;
            margin-left: 0px;
            left: 150px;
            display: flex;
        }  
        .closeBox{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            height: 300px;
            width: 500px;
            grid-gap: 20px;
            margin-top: 45px;
            margin-left: 100px;

        }
        .box:hover{
            box-shadow: 1px 15px 20px gray;
        }
        .box:active{
            background-color: rgb(215, 141, 13,0.5);
        }
        .box{
            background-color: rgb(215, 141, 13);
            /* border: 1px solid red; */
            border-radius: 20px;
            width: 150px;
            
        }
        .box img{
            margin-top: 10px;
            margin-left: 25%;
            width: 50%;
            height: auto;
        }
        .box p{
            margin-left: 25%;
        }
        .title{
            font-size: 40px;
            background-color: rgba(15, 8, 2, 0.22);
            position:absolute;
            width:100%;
            height: auto;
            border-color: red;
            margin: auto;
            display: flex;
            color:rgb(197, 235, 235);
        }
        .theMe{
            position: absolute;
            width: 800px;
            height: 200px;
            margin: auto;
            margin-top: 0px;
            top: 150px;
            margin-left: 0px;
            left: 50px;
            display: flex;
            font-size: 80px;
            color: white;
            font-weight:bold;
            font-family:  myFontStyle;
        }
        @font-face{
            font-family: myFontStyle;
            src:url(../4.其他样式/font-size/hanyidishengbiluochun.ttf)
        }
        .time{
            position: absolute;
            width: auto;
            height: auto;
            margin: auto;
            margin-top: 0px;
            top: 700px;
            margin-left: 0px;
            right:150px;
            display: flex;
            font-size: 100px;
            color: rgb(177, 212, 211);
        }

利用JS显示当前时间：

        document.addEventListener("DOMContentLoaded", function() {  
            function showTime() {  
                var date = new Date();  
                var hours = date.getHours();  
                var minutes = date.getMinutes();  
                var seconds = date.getSeconds();  
  
                hours = (hours < 10) ? "0" + hours : hours;  
                minutes = (minutes < 10) ? "0" + minutes : minutes;  
                seconds = (seconds < 10) ? "0" + seconds : seconds;  
  
                var time = hours + ":" + minutes + ":" + seconds;  
                document.getElementById("time").innerHTML = time;  
            }  
            // 初始显示时间  
            showTime();  
            // 每秒调用showTime函数以更新时间  
            setInterval(showTime, 1000);  
        });