一个简易的炫彩时钟

最新推荐文章于 2024-10-06 21:21:23 发布

溺水的鱼wj

最新推荐文章于 2024-10-06 21:21:23 发布

阅读量477

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/W3501488608/article/details/127975719

版权

效果图：

html部分代码：

<body>
    <div class="box">
        <div class="clock">
            <p id="time"></p>
        </div>
    </div>
</body>

css部分代码：

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

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    width: 100vw;
    height: 100vh;
    background: url(PRSS.png) center;
    background-size: cover;
    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);
    }
}

js部分代码：

// 获取页面id=time的元素（P元素<p id="time"></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);