[100天挑战100个前端效果]第十六天---炫彩数字时钟

最新推荐文章于 2023-08-18 15:08:53 发布

钧桐

最新推荐文章于 2023-08-18 15:08:53 发布

阅读量151

点赞数

分类专栏： 100天挑战100个前端效果文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_42136832/article/details/115527843

版权

100天挑战100个前端效果专栏收录该内容

25 篇文章 8 订阅

订阅专栏

炫彩数字时钟

让我们先来看看实现的效果
- html代码
- css代码
今日份知识总结

让我们先来看看实现的效果

在这里插入图片描述

html代码

<!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));
    background-clip: text;
    -webkit-background-clip: text;
} 

@keyframes animate {
    100% {
        filter: hue-rotate(360deg);
    }
}

今日份知识总结

标签	作用
document.querySelector("#demo");	获取文档中 id=“demo” 的元素：
getHours	根据本地时间返回时间的小时字段：
getMinutes	可返回时间的分钟字段。
getSeconds	可返回时间的秒。
textContent	textContent 属性设置或者返回指定节点的文本内容。
setInterval	setInterval(() => {up(time); }, 1000);定时器
inherit	inherit 关键字指定一个属性应从父元素继承它的值。
-webkit-background-clip	实现镂空渐变色字体，配合color：transparent来使用
background-clip	属性规定背景的绘制区域。
letter-spacing	属性增加或减少字符间的空白（字符间距）。
hue-rotate	是一个内置函数，用于对图像应用滤镜以设置图像的色调旋转。(让色调旋转，很吊！)

钧桐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[100天挑战100个前端效果]第十六天---炫彩数字时钟

炫彩数字时钟让我们先来看看实现的效果html代码css代码今日份知识总结让我们先来看看实现的效果html代码<!DOCTYPE html><html lang="zh-Hans"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第十六天
复制链接

扫一扫

专栏目录