HTML+CSS+JS 立体字时钟

admin 2024-08-11 677 阅读 0评论

效果演示

实现了一个时钟效果，包括一个背景颜色为淡粉色的容器和一个使用Google字体库中的Kanit字体的时钟。时钟使用了flex布局，使其水平和垂直居中。时钟的数字使用了Kanit字体，字体大小为150px，字体加粗，阴影效果使用了多个不同颜色和大小的阴影，使其看起来更加立体和有层次感。

Code

HTML

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

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

<body>
    <div class="clock">
        <p id="1">0</p>
        <p id="2">0</p>
        <p id="3">:</p>
        <p id="4">0</p>
        <p id="5">0</p>
        <p id="6">:</p>
        <p id="7">0</p>
        <p id="8">0</p>
    </div>
</body>
<script src="./30-立体字时钟.js"></script>

</html>

CSS

@import url("http://fonts.googleapis.com/css?family=Kanit");

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eacccc;
    user-select: none;
}

.clock {
    display: flex;
}

.clock p {
    width: 95px;
    font-size: 150px;
    color: #fff;
    text-align: center;
    font-family: "Kanit";
    font-weight: 900;
    text-shadow: 0 1px 0 #deafaf,
    0 2px 0 #bda8a8,
    0 3px 0 #d8a1a1,
    0 4px 0 #d59999,
    0 5px 0 #d29292,
    0 6px 0 #cf8b8b,
    0 7px 0 #cc8484,
    0 8px 0 #c97d7d,
    0 0 5px rgba(231, 156, 156, 0.05),
    0 -1px 3px rgba(231, 156, 156, 0.2),
    0 9px 9px rgba(231, 156, 156, 0.3),
    0 12px 12px rgba(231, 156, 156, 0.3),
    0 15px 15px rgba(231, 156, 156, 0.3);
}

JavaScript

function myTime() {
    let time = new Date();
    let hh = time.getHours();
    let mm = time.getMinutes();
    let ss = time.getSeconds();

    document.getElementById("1").innerText = Math.floor(hh / 10);
    document.getElementById("2").innerText = hh % 10;
    document.getElementById("4").innerText = Math.floor(mm / 10);
    document.getElementById("5").innerText = mm % 10;
    document.getElementById("7").innerText = Math.floor(ss / 10);
    document.getElementById("8").innerText = ss % 10;
}

setInterval(myTime, 1000);

实现思路拆分

@import url("http://fonts.googleapis.com/css?family=Kanit");

这段代码使用了Google字体库中的Kanit字体，用于时钟数字的显示。

* {
    margin: 0;
    padding: 0;
}

这段代码设置了所有元素的外边距和内边距为0，这是为了避免不同浏览器之间的默认样式差异。

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eacccc;
    user-select: none;
}

这段代码设置了body元素的高度为100vh，使其占据整个视口的高度。同时，使用flex布局使其水平和垂直居中。背景颜色为淡粉色。使用user-select属性禁止用户选择文本。

.clock {
    display: flex;
}

这段代码设置了时钟的样式，使用flex布局，使其水平和垂直居中。

.clock p {
    width: 95px;
    font-size: 150px;
    color: #fff;
    text-align: center;
    font-family: "Kanit";
    font-weight: 900;
    text-shadow: 0 1px 0 #deafaf,
    0 2px 0 #bda8a8,
    0 3px 0 #d8a1a1,
    0 4px 0 #d59999,
    0 5px 0 #d29292,
    0 6px 0 #cf8b8b,
    0 7px 0 #cc8484,
    0 8px 0 #c97d7d,
    0 0 5px rgba(231, 156, 156, 0.05),
    0 -1px 3px rgba(231, 156, 156, 0.2),
    0 9px 9px rgba(231, 156, 156, 0.3),
    0 12px 12px rgba(231, 156, 156, 0.3),
    0 15px 15px rgba(231, 156, 156, 0.3);
}