设为首页收藏本站

切换到窄版

论坛BBS

爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS+JS 立体字时钟

返回列表发新帖

查看: 344|回复: 0

HTML+CSS+JS 立体字时钟

74 主题	30 回帖	697 积分

积分: 697

发消息

发表于 2024-6-25 15:03:10 | 显示全部楼层 |阅读模式

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

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

复制代码

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);
}

复制代码

这段代码设置了时钟数字的样式，使其宽度为95px，字体大小为150px，颜色为白色，居中对齐，使用了Google字体库中的Kanit字体，字体加粗。同时，使用了多个不同颜色和大小的阴影，使其看起来更加立体和有层次感。

回复

返回列表发新帖

快速回复 返回顶部 返回列表