HTML+CSS实现炫彩的数字时钟！！附源码！！

七夏（UID：1） · 发表于 2024-10-21 09:56:42

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

完整源码：

<!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="css/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);
    }
}

HTML+CSS实现炫彩的数字时钟！！附源码！！

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

快速回帖

分享帝

龙年限定

关于楼主

商务推广