您的当前位置：首页正文

HTML+CSS制作炫彩的数字时钟

2024-11-08 来源：个人技术集锦

HTML+CSS制作炫彩的数字时钟
效果图如下：

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字时钟</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="clock_box">
        <div class="clock">
            <p id="time"></p>
        </div>
    </div>
    <script>
        // 获取页面id=time的元素（P元素<p id="time">12:12:12 AM</p>）
        var time = document.querySelector("#time");

        // 定义函数传入time元素
        function up(time_el) {
            // 获取当前时间
            let date = new Date();
            // 获取时分秒
            let h = date.getHours();
            let m = date.getMinutes();
            let s = date.getSeconds();
            // 上午与下午
            let day_night = "AM";

            // 计算上午与下午
            if (h > 12) {
                h = h - 12;
                day_night = "PM";
            }

            // 如果时间小于10则前面补充0
            if (h < 10) { h = "0" + h; }
            if (m < 10) { m = "0" + m; }
            if (s < 10) { s = "0" + s; }

            // 拼接时间并且赋值给time元素的文本中，从而显示
            time_el.textContent = h + ":" + m + ":" + s + " " + day_night;

        }

        // 定时器，每秒执行一次实现更新
        setInterval(() => {
            up(time);
        }, 1000);

    </script>
</body>

</html>

CSS部分代码如下：

:root {
    --color2: #56d5fc;
    --color4: #def700;
    --color6: #fa3195;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}

.clock_box {
    position: relative;
    width: 380px;
    height: 80px;
    border-radius: 10px;
    background-image: linear-gradient(135deg, var(--color2), var(--color4), var(--color6));
    /* 居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    animation: animate 4s linear infinite;
}

.clock_box::after, .clock_box::before {
    position: absolute;
    content: "";
    /* 集成父级样式 */
    background-image: inherit;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 10px;
    filter: blur(15px);
}

.clock_box::before {
    filter: blur(100px);
}

.clock {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    background-color: #2b2a2a;
    border-radius: 8px;
    /* 居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.clock p {
    font-size: 50px;
    font-weight: bold;
    color: transparent;
    letter-spacing: 2px;
    background-image: linear-gradient(135deg, var(--color2), var(--color4), var(--color6));
    /* text不是通用样式属性值 */
    background-clip: text;
    /* 这个是chrome */
    -webkit-background-clip: text;
}

@keyframes animate {
    100% {
        /* 色相变化 */
        filter: hue-rotate(360deg);
    }
}