简约版时间案例

喜崽

已于 2023-03-15 10:09:26 修改

阅读量80

点赞数

文章标签： css html css3 javascript

于 2023-03-14 11:28:42 首次发布

本文链接：https://blog.csdn.net/m0_48893127/article/details/129521642

版权

该文章演示了一个HTML和JavaScript的示例，其中包含一个大盒子显示背景图，小盒子显示时间（小时：分钟：秒）。当鼠标移到时间盒子上时，会显示另一个盒子，展示当前的年月日和星期。使用CSS设置了样式和移入效果，通过JavaScript监听事件并更新时间显示。

摘要由CSDN通过智能技术生成

1、设置大盒子box:给一个背景图

2、设置一个小盒子timeBox：用于显示时间时：分：秒

3、对timeBox盒子添加移入效果，出现另外一个盒子yearBox，显示年月日和星期

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            background: url(./images/03.jpg) no-repeat center;
            /* 全部撑满 */
            background-size: cover;
            width: 400px;
            height: 400px;
            margin: 40px auto;
            position: relative;
        }

        .timeBox {
            width: 200px;
            height: 70px;
            /* background: url(./images/02.jpg) no-repeat center; */
            background: rgba(251, 249, 249, .5);
            background-size: cover;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 70px;
            box-shadow: 0px 0px 15px 6px rgb(53, 53, 53);
            color: #fff;
            font-size: 30px;
        }

        #yearBox {
            background: rgba(79, 76, 41, .6);
            width: 200px;
            height: 70px;
            position: absolute;
            top: -75px;
            left: 0px;
            font-size: 14px;
        }

        /* 隐藏年月日的弹框 */
        .on {
            display: none;

        }
    </style>
</head>

<body onload="dateTime()">
    <!--
        1、 设置大盒子box:给一个背景图
        2、设置一个小盒子：用于显示时间 时：分：秒
        3、对timeBox盒子添加移入效果，出现另外一个盒子yearBox，显示年月日和星期
    -->

    <div id="box">
        <div class="timeBox">
            00:00:00
            <div class="on" id="yearBox">
            </div>
        </div>
    </div>
    <script>
        // debugger;
        let timeBox = document.querySelector(".timeBox");
        let yearBox = document.querySelector("#yearBox");
        function dateTime() {
            // 设置周期定时器
            setInterval(function () {
                let time = new Date();
                //    获取时分秒
                timeBox.firstChild.textContent = `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
            }, 1000)
        }
        timeBox.addEventListener("mouseover", function () {

            setInterval(function () {
                let time = new Date();
                // 获取年月日和星期
                yearBox.innerHTML = `${time.getFullYear()}年${time.getMonth()+1}月${time.getDate()}日 --星期${time.getDay()}`;
            }, 1000)
            yearBox.className = "";

        })
        timeBox.addEventListener("mouseout", function () {
            yearBox.className = "on";
        })
    </script>
</body>

</html>